How to iterate through the JSON object response in React Native

Question

I need help on now to iterate the JSON object response for a React-Native project i'm working on using expo dev.

This is the link for JSON response: https://opylistic.com/lens/api/get_education_data/91

//JSON response below:

{
"data": [
    {
        "id": 1,
        "user_id": 91,
        "institution": "Anambra State University, Owerri",
        "qualification": "Certified Designer",
        "study_field": "Mathematic",
        "start_date": "22th January 1992",
        "end_date": "14th June 2021",
        "grade": "Upper credit",
        "created_at": "2021-11-22T22:46:05.000000Z",
        "updated_at": "2021-11-22T22:46:05.000000Z"
    },
    {
        "id": 3,
        "user_id": 91,
        "institution": "Anambra State University, Owerri",
        "qualification": "Certified Designer",
        "study_field": "Mathematic",
        "start_date": "12/08/2021",
        "end_date": "23/05/2021",
        "grade": "Second-class Upper Division",
        "created_at": "2021-11-23T22:37:21.000000Z",
        "updated_at": "2021-11-23T22:37:21.000000Z"
    },
    {
        "id": 4,
        "user_id": 91,
        "institution": "Delta State University, Imo State, Nigeria",
        "qualification": "PhD",
        "study_field": "Computer science",
        "start_date": "22th January 1992",
        "end_date": "14th June 2021",
        "grade": "Distinction",
        "created_at": "2021-11-23T22:37:39.000000Z",
        "updated_at": "2021-11-23T22:38:13.000000Z"
    }
],
"status": "success",
"total": 3

//This is the part of the code that fetches the JSON response object:

const[eduData, setEduData] = useState(false);

const[eduData, setEduData] = useState(false);

const[eduTotal, setEduTotal] = useState('');

const[eduInfo, setEduInfo] = useState('');

useEffect(() => {
SecureStore.getItemAsync('user')
  .then(userString => {
   if (userString) {
 const userObject = JSON.parse(userString)
 setUsername(userObject);
   
  fetch('https://opylistic.com/lens/api/get_education_data/'+userObject.id+'')
  .then((response) => response.json())
  .then(responseJson => {
    
  if(responseJson.status == 'success')
   {
      alert(JSON.stringify(responseJson.data)); 
      setEduData(true);
      setEduInfo(responseJson.data);
      setEduTotal(responseJson.total);  

  }

//This is the return statement for my view section

if(eduData)
{
 return(
  <View>
  <Text>{eduInfo.institution}</Text>
   {Object.keys(eduInfo).map((key, idx) => (
    <Text key={idx}>{eduInfo[key]}</Text>
  ))}
  </View>
);

The alert is showing the received json data in string format but when I tried to display in my view, i got the error message shown below.

Error message:

Objects are not valid as React child(found: object with keys (id, user_id, institution, qualification, study_field, start_date, end_date, grade). If you mean to render a collection of children, use an array instead.