I am trying to load longDescription from my strapi dashboard but I keep running into this error message of Objects are not valid as a React child (found: object with keys {type, children}). If you meant to render a collection of children, use an array instead. its happening because of this code: <p>{item?.attributes?.longDescription}</p>. I have tried so many methods to fix this and nothing has worked. Can someone please help?

Here is my code so far:

import React, { useState, useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { IconButton, Box, Button, Tabs, Tab } from '@mui/material';
import { addToCart } from '../../state/index.js';
import { useParams } from 'react-router-dom';
import Item from '../../components/Item';
import './ItemDetails.css'
import '../../App.css'

const ItemDetails = () => {
  const dispatch = useDispatch();
  const { itemId } = useParams(); // This will help grab the item id to this page
  const [value, setValue] = useState("description");
  const [count, setCount] = useState(1);
  const [item, setItem] = useState(null);
  const [items, setItems] = useState(['']);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  }

  async function getItem() {
    const item = await fetch(
      `localhost`,
      { method: "GET"}
    );
    const itemJson = await item.json();
      setItem(itemJson.data);
  };

  async function getItems() {
    const items = await fetch(
      "localhost",
      { method: "GET" }
    );
    const itemsJson = await items.json();
    setItems(itemsJson.data);
  };

  useEffect(() => {
    getItem();
    getItems();
  }, [itemId]); // eslint-disable-line react-hooks/exhaustive-deps

  return (
    <div className='item-details-container'>
      <div className='item-details-content'>
        {/* IMAGES */}
        <Box flex="1 1 40%" mb="40px">
          <img
            alt={item?.name}
            width="100%"
            height="100%"
            src={`localhost}`}
            style={{ objectFit: 'cover'}}
          />
        </Box>

        {/* ACTIONS */}
        <Box flex="1 1 50%" mb="40px">
          <Box display="flex" justifyContent="space-between">
            <Box>Home/Items</Box>
            <Box>Prev Next</Box>
          </Box>
        

          <Box m="65px 0 25px 0">
            <p>{item?.attributes?.title}</p>
            <p>£{item?.attributes?.price}</p>
            {/* Below is where the error is happening */}
            <p>{item?.attributes?.longDescription}</p> 
          </Box>

      </Box>
      </div>
    </div>
  )
}

export default ItemDetails