React Tanstact Table

I got a component for a datatable in react made with Tanstack Table. this is the code.

import React from "react";
import { useReactTable } from "@tanstack/react-table";
import data from "../../Utils/MOCK_DATA.json";

const SimpleTable = () => {
  const columns = [
    {
      Header: "Id",
      accessorKey: "id",
    },
    {
      Header: "Amount",
      accessorKey: "amount",
    },
    {
      Header: "Currency",
      accessorKey: "currency",
    },
    {
      Header: "Date",
      accessorKey: "date",
    },
  ];

  const table = useReactTable({ data, columns });

  return (
    <>
      <table>
        <thead>
          {
            table.getHeaderGroups().map(headerGroup => (
              <tr key={headerGroup.id} className="text-cyan-300">
                {
                  headerGroup.headers.map(header => (
                    <th key={header.id}>
                      {header.column.columnDef.header}
                    </th>
                    ))
                }
            </tr>
            ))
          }
        </thead>
        <tbody>
          <tr>
            <td>1</td>
          </tr>
        </tbody>
        <tfoot></tfoot>
      </table>
    </>
  );
};
export default SimpleTable;

when i start the server and call the component i get this error

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.
at th
at tr
at thead
at table
at SimpleTable (http://localhost:5173/src/components/Tables/SimpleTable.jsx?t=1712628648080:34:19)
at App