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);

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 = () => {
    const doc = new jsPDF();
    doc.text("Order details", 20, 10);
      head: [["Name", "House No. & Address", "Orders", "Total Amount"]],
      body: [
        ["David", "", "Sweden"],
        ["Castille", "", "Spain"]
        // ...

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:
So far, this will only show as [object object] when I try to print this

     console.log( =>[3]),

codesandbox: mui-datatable reports - CodeSandbox