Check the render method of `TableComponent`

Question

import {
    createColumnHelper,
    Headers,
    useReactTable,
} from "@tanstack/react-table";
import React from "react";

const columnHelper = createColumnHelper();

const columns = [
    columnHelper.accessor("key", {
        cell: (info) => info.getValue(),
        header: () => "Key",
    }),
    columnHelper.accessor("value", {
        cell: (info) => {
            const value = info.getValue();
            if (typeof value === "object" && value !== null) {
                return (
                    <div>
                        <button
                            onClick={() => {
                                info.row.toggleExpanded();
                            }}>
                            {info.row.getIsExpanded() ? "-" : "+"}
                        </button>
                    </div>
                );
            } else {
                return (
                    <input
                        type="text"
                        value={value}
                        onChange={(e) => {
                            info.row.update(value, e.target.value);
                        }}
                    />
                );
            }
        },
        header: () => "Value",
    }),
];

const data = [
    {
        key: "createdAction",
        value: {
            actionType: "CREATED",
            datetime: "2023-02-09T09:42:48Z",
        },
    },
    {
        key: "modifiedAction",
        value: {
            actionType: "DISCONTINUED",
            datetime: "2023-02-16T01:07:18Z",
        },
    },
    {
        key: "history",
        value: [
            {
                actionType: "DISCONTINUED",
                datetime: "2023-02-16T01:07:18Z",
            },
            {
                actionType: "CREATED",
                datetime: "2023-02-09T09:42:48Z",
            },
        ],
    },
];

const TableComponent = () => {
    const table = useReactTable({
        columns,
        data,
        getSubRows: (row) => {
            if (Array.isArray(row.value)) {
                return row.value.map((subRow) => ({ ...subRow, parent: row }));
            }
            if (typeof row.value === "object" && row.value !== null) {
                return Object.keys(row.value).map((key) => ({
                    key,
                    value: row.value[key],
                    parent: row,
                }));
            }
            return [];
        },
    });

    return (
        <table>
            <thead>
                {table.getHeaderGroups().map((headerGroup) => (
                    <tr key={headerGroup.id}>
                        {headerGroup.headers.map((header) => (
                            <th key={header.id}>
                                <Headers column={header} table={table} />
                            </th>
                        ))}
                    </tr>
                ))}
            </thead>
            <tbody>
                {table.rows &&
                    table.rows.map((row) => (
                        <React.Fragment key={row.id}>
                            <tr>
                                {table.visibleColumns.map((column) => (
                                    <td key={column.id}>{column.renderCell(row)}</td>
                                ))}
                            </tr>
                            {row.getIsExpanded() && (
                                <tr>
                                    <td colSpan={table.visibleColumns.length}>
                                        <table>
                                            <tbody>
                                                {row.subRows &&
                                                    row.subRows.map((subRow) => (
                                                        <tr key={subRow.id}>
                                                            {table.visibleColumns.map((column) => (
                                                                <td key={column.id}>
                                                                    {column.renderCell(subRow)}
                                                                </td>
                                                            ))}
                                                        </tr>
                                                    ))}
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            )}
                        </React.Fragment>
                    ))}
            </tbody>
        </table>
    );
};

export default TableComponent;

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of TableComponent. at createFiberFromTypeAndProps (react-dom.development.js:28478:1) at createFiberFromElement (react-dom.development.js:28504:1) at reconcileSingleElement (react-dom.development.js:13986:1) at reconcileChildFibers (react-dom.development.js:14044:1) at reconcileChildren (react-dom.development.js:19186:1) at updateHostComponent (react-dom.development.js:19953:1) at beginWork (react-dom.development.js:21657:1) at beginWork$1 (react-dom.development.js:27465:1) at performUnitOfWork (react-dom.development.js:26596:1) at workLoopSync (react-dom.development.js:26505:1)

I was using nested object as data for the table. Expanding the row if value is object or edit if value is primitive type. I've checked the imports but couldn't find the issue.

To import this component in App.js as stand-alone component to check its implementation.