This is the body of the code

 const tableHeader = [
        { title: "Product name", widthClass: "w-[25%]" },
        { title: "Product category", widthClass: "w-[19%]" },
        { title: "Qty", widthClass: "w-[28%]" },
        { title: "Unit of measure", widthClass: "w-[20%]" },
        { title: "Cost", widthClass: "w-[20%]" },
    ];

    const filteredData = freightData?.po?.itemsOrServices?.filter((item) => item.inventoryId);

    const tableBody = filteredData?.map((data, idx) => [
        {
            content: (
                <div
                    key={idx}
                    className={py-3 pr-4 border-slate-100 text-sm font-rocGroteskMedium text-slate-900 }
                >
                    <p className="text-slate-700 capitalize">{data?.name || "N/A"}</p>
                </div>
            ),
        },
        {
            content: (
                <div
                    className={py-3 pr-4 flex font-rocGroteskMedium items-center h-full border-slate-100 text-sm text-slate-900 }
                >
                    <p className="text-slate-700">{data?.inventoryCategory || "N/A"}</p>
                </div>
            ),
        },

        {
            content: (
                <div className={py-3  pr-4 text-sm font-rocGroteskMedium text-slate-900 }>
                    <div className="">
                        <TextInput
                            value={data.qty}
                            name={"qty"}
                            type={"number"}
                            onWheel={(e) => e.target.blur()}
                            onKeyDown={(evt) =>
                                ["e", "E", "+", "-", "ArrowUp", "ArrowDown"].includes(evt.key) &&
                                evt.preventDefault()
                            }
                            required={true}
                            onChange={(e) => handleChange(e, idx)}
                            inputPlaceholder="Qty"
                            containerClassname=""
                            inputContainerClassname={"!h-[40px]"}
                            inputClassName="w-full !h-[40px] !mb-0"
                        />
                    </div>
                </div>
            ),
        },
        {
            content: (
                <div className={py-3  pr-4 text-sm font-rocGroteskMedium text-slate-900 }>
                    <p className="text-slate-700">
                        {data?.productStockDetails?.unitOfMeasurement || "N/A"}
                    </p>
                </div>
            ),
        },
        {
            content: (
                <div className={py-3  pr-4 text-sm font-rocGroteskMedium text-slate-900 }>
                    <p className="text-slate-700">
                        {getCurrencyFromCurrencyCode(data?.subtotal?.currency)}
                        {formatMoney()?.format(data?.subtotal?.amount || 0) || "N/A"}
                    </p>
                </div>
            ),
        },
    ]);

I am trying to update the state using setFreightData but, I discovered that the error message you’re encountering indicates that there’s a state mutation happening between dispatches, specifically in the path order.fetchedPurchaseOrderSuccess.po.0.itemsOrServices.0.qty but it seems like there might be an issue with how you’re updating nested arrays in the state.

trim out empty data from oceanCarriers

Also, ensure that you’re creating new objects and arrays when updating the state, which should resolve the “Invariant failed” error.