How can I retrieve the data that is in a very nested Array that is at index 3?

I have this tableState.displayData that I wanted to assign to a useState. However, this would result in the error:

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

const [displayedData, setDisplayedData] = useState([]);
  function handleTableChange(action, tableState) {
    // console.log("handleTableChange:... ", tableState.displayData);

    console.log(tableState.displayData, " tableState");
    const totalAmount = calculateTotalSum(tableState.displayData);
    setTotal(totalAmount);
    setDisplayedData(tableState.displayData);
  }

How can I assign the tableState.displayData to a variable which I can use outside of the function ?

Since I’ll be using the data of the tableState.displayData in this function to print it:

const handlePrint = () => {
    console.log("clicked");
    const doc = new jsPDF();
    doc.text("Order details", 20, 10);
    doc.autoTable({
      head: [["Name", "House No. & Address", "Orders", "Total Amount"]],
      body: [
        ["David", "david@example.com", "Sweden"],
        ["Castille", "castille@example.com", "Spain"]
        // ...
      ]
    });

    doc.save("order.pdf");
  };

I recreated this in code sandbox as well: mui-datatable reports - CodeSandbox

where you are calling this function?

I have this very nested data that I’m trying to retrieve the product name, color, and quantity. The data is stored at the displayedData . The items are being stored inside the index 3, however, it is very nested:
image
So far, this will only show as [object object] when I try to print this

     console.log(
    displayedData.map((a) => a.data[3]),
    "sample"
  );

codesandbox: mui-datatable reports - CodeSandbox