Uncaught error: objects are not valid as a react child

Hello, im quite new to react js and im struggling with this error: " Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead. "

I created the basic react app by running "npx create-react-app name-of-app"

my code is:

import React, { useState, useEffect } from 'react';

const output = document.querySelector('.output');
const url = 'https://docs.google.com/spreadsheets/d/';
const ssid = '(censored)';
const query1 = `/gviz/tq?`;
const endpoint = `${url}${ssid}${query1}`;

export default async function RigOverview() {

    const resp = await fetch(endpoint).then(response => response.text()).then(data => {
        const temp = data.substr(47).slice(0, -2);
        const json = JSON.parse(temp);
        const rows = json.table.rows;
        console.log("rows: ", rows)
        return rows;
    });  

    return(
        <h2>{resp[1].c[4]}</h2>
    )

}

in the console.log, "rows" return an array that looks like this: https://imgur.com/a/NJESUP2 , and I would simply like to display 'First status in workshop' in a <h2> bracket.

Im looking for a simple way to do this, but im not sure how to solve this error.

If I made anything unclear, please ask! thanks for any help

I'm trying to access the review object from reviews.js in FirstReview.js to display the author and content but seem to be having some trouble and dont understand why.

ERROR: Error: Objects are not valid as a React child (found: object with keys {roles, _id, username, email, password, __v}). If you meant to render a collection of children, use an array instead.

The error seems to occur from the way I'm accessing props in FirstReview.js in the authot and content section of Comment. However I'm unsure as to how I've accessed props.review incorrectly and why the error is displaying the User object

reviews.js

import React, {useState, useRef} from 'react';
import Axios from 'axios';
import {Button, Input} from 'antd';
import authService from '../../services/auth.service'
import authHeader from '../../services/auth-header';
import FirstReview from './FirstReview';

const {TextArea} = Input;

const Reviews = (props) => {

    const currentUser = authService.getCurrentUser();

    const [review, setReview] = useState('');

    const handleChange = (e) => {
        setReview(e.target.value)
    }

    const onSubmit = (e) => {
        e.preventDefault();

        const variables = {
            movieId: props.movieId,
            content: review,
            author: currentUser.id,
            reviewId: props.reviewId,
        }

        Axios.post('http://localhost:8080/api/review/addReview', variables,{ headers: authHeader()})
        .then(response=> {
            if(response.data.success) {
                setReview("")
                props.refreshFunction(response.data.result)
            } else {
                alert('Failed to save review')
            }
        })
    }

    return (
        <div>
                <p>Reviews</p>
                {props.reviewList && props.reviewList.map((review, index) => (
                    (!review.responseTo &&
                    <React.Fragment key={review._id}>
                        <FirstReview review={review} movieId={props.movieId} refreshFunction={props.refreshFunctions}/>
                    </React.Fragment>
                )))}
                <form style={{display: 'flex'}} onSubmit>
                    <TextArea
                        style={{width: '100%', borderRadius: '5px'}}
                        placeholder = "leave a review"
                        value={review}
                        onChange={handleChange}
                        />
                        <Button style = {{width: '20%', height: '52px'}} onClick={onSubmit}></Button>
                </form>
        </div>
    );
};

export default Reviews

FirstReview.js

import React from 'react'
import {Comment, Avatar, Button, Input} from 'antd';
const {TextArea} = Input;

const action = [
  <span onClick key="comment-basic-reply-to">reply</span>
]


function FirstReview(props) {
  return (
    <div>
      <Comment
        actions = {action}
        author={props.review.author} 
        content={
          <p>
            {props.review.content}
          </p>
        }
        >
        </Comment>

        <form style={{display: 'flex'}} onSubmit>
                    <TextArea
                        style={{width: '100%', borderRadius: '5px'}}
                        placeholder = "leave a review"
                        value={Comment}
                        onChange
                        />
                </form>
    </div>
  )
}

export default FirstReview

How do you fix objects are not valid as a React child?

How do you render collection of children React?

How do you pass an array of objects as a prop in React?

What is a React child?