enter image description hereI'm using useEffect hook to use fetch api but it doesn't work. when there is only one api it is working fine but when i use another api to fetch data using the useEffect hook in the createData function it gives error.

I did some research and i think it is because of some issues caused in re rendering of component in react, i tried to search for the fix but couldn't find it so I'm posting it, if there is any question kindly ask me in comments I'll give more details about it.

export default function Unpaid({ transporterId, getFn }) {
  const [itemData, setItemData] = useState([]);
  const [resData, setResData] = useState([]);


  const idUrl =
    "https://url...";

  useEffect(() => {
    let mounted = true;

    fetch(idUrl)
      .then((data) => data.json())
      .then((data) => setResData(data));

    return () => (mounted = false);
  }, []);

  console.log(resData, "response data");

  const dispatchId = resData.map((item) => item.id);
  console.log(dispatchId, "dispatch id");

  function createData(
    po,
    id
  ) {
    useEffect(() => {
      fetch(
        "https://url+id"
      )
        .then((data) => data.json())
        .then((data) => setItemData(data));
    }, []);

    console.log(itemData, "yohohoho");

    return {
      po,
    };
  }

  function Row(props) {
    const { row } = props;
    const [open, setOpen] = React.useState(false);

    return (
     <>
       jsx content
     </>
    );
  }


  const rows = resData.map((item) =>
    createData(
      item.purchase_order_details.po_number &&
        item.purchase_order_details.po_number.length > 0
        ? item.purchase_order_details.po_number
        : "NA",
     
      item.id
    )
  );
 
  return (
   <>
     jsx content
   </>
  );
}