React Child error from one function seems is referencing another function

Here is a snippet of my code:

const CategoryPage = () => {
    const { category } = useParams();
    const [loading, setLoading]=useState(true);
    const [loading2, setLoading2]=useState(true);
    const [categoryinfo, setCategoryinfo]=useState("")
    const [categoryname, setCategoryname]=useState("")

    useEffect(() => {

      const showjokes = ({category}) => {
    
    try {
    fetch(`https://fakeurl.herokuapp.com/categorypage/${category}/`, {
    method: "GET",
    mode: "cors",
    headers: {
    "Content-Type": "application/json",
    },
    })
    .then(res => res.json())

    .then(data => {
        console.log('chisora', JSON.parse(data.jokes))
        setLoading2(false)
        const categoryjokes = JSON.parse(data.jokes)
        console.log("categoryjokes", categoryjokes)
        setCategoryinfo(categoryjokes)
        console.log(JSON.parse(data.jokes), "<==== here is data")
        getcatname({category})
    })
    } catch (error) {
    console.log("update, error time!", error);
    return false;
    }
    };
      showjokes({category})


      const getcatname = ({category}) => {
    
    try {
    fetch(`https://fakeurl.herokuapp.com/getcatname/${category}/`, {
    method: "GET",
    mode: "cors",
    headers: {
    "Content-Type": "application/json",
    },
    })
    .then(res2 => res2.json())

    .then(data2 => {
        console.log('parker', JSON.parse(data2.categoryname))
        const categorynombre = JSON.parse(data2.categoryname)
        console.log("categorynombre", categorynombre.category)
        setCategoryname(categorynombre.category)
        setLoading(false)
        //console.log(JSON.parse(data.categoryname), "<==== here is data")
    })
    } catch (error) {
    console.log("update, error time!", error);
    return false;
    }
    };



    },[]);

    console.log("checking loading",loading, loading2)
    //console.log("the stuff",categoryinfo[0].joke_category)
    const stuff = categoryinfo
    console.log('stuff', stuff)
    console.log('categoryname', categoryname)
    if ( loading2 || loading ) return <p>loading</p>

    return (
    <IonPage>
        <h1>{categoryname} jokes</h1>
                        <IonGrid className={ styles.bottomContainer }>
                    <IonRow>
                        <IonCol size="12" className="ion-padding-start">
                            <IonCardSubtitle className={ styles.heading }>
                                {categoryname} jokes
                            </IonCardSubtitle>
                        </IonCol>
                    </IonRow>

As you can see there are two functions in the useEffect. One to get an array of joke data and the other to get the name of the category the joke is in.

This is my error message:

Error: Objects are not valid as a React child (found: object with keys {joke, joke_name, joke_owner, joke_category, id}). If you meant to render a collection of children, use an array instead.

And it points to setLoading(false) within the getcatname function. The object that is referred to in the error is referring to the object that I get from the showjokes function.

The console.logs right before I check the two loading hooks log the data just perfectly. In other words, the functions in the useEffect do their job as far as the end product is concerned.

There is a lot I don’t understand here. What is the “React child” that is being referred to? When I look around for solutions it seems to come up in render functions, but my error is simply pointing to the setLoading hook part. Why am I getting an error that seems to be referencing what is going on in another function but the error is within the other function?