React Child error from one function is referencing another function

Here is now all of my code:

import styles from './Add.module.scss';
import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import {IonPage, IonGrid, IonCol, IonRow, IonCardSubtitle, IonCard} from '@ionic/react';
import { Link } from 'react-router-dom';


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>
        <div className={ styles.recentNotes }>

            { stuff.map((note, index) => {

                return (
                                

            <IonRow key={ `note_${ index }` } className="animate__animated animate__faster" id={ `noteRow_${ note.id }` }>
                <IonCol size="12">
                        <Link to={`/Update/${note.id}`}>
                                            <h2>{note}</h2>
                        </Link>
                </IonCol>
            </IonRow>
                            );
                        })}
        </div>

      </IonGrid>
    </IonPage>
  );
};

export default CategoryPage;

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?

Edit: Straight from postman:

data =

{
    "jokes": "[{\"joke_name\": \"scar lengthening\", \"joke_owner\": 1, \"id\": 5, \"joke_category\": 5, \"joke\": \"eventually scar tissue lengthens when they get tired of being pulled\"}, {\"joke_name\": \"bummer\", \"joke_owner\": 1, \"id\": 45, \"joke_category\": 5, \"joke\": \"Scar Tissue is a bummer\"}]"
}

data2 =

{
    "categoryname": "{\"category_owner\": 1, \"id\": 5, \"category\": \"scar tissue\"}"
}