I am trying to remove the first element of the data array using data.shift() but this removes the first element immediately then my column gets a different value. My Code:

import React, { useMemo } from "react";
import useData from "../../hooks/useData";
import Table from "./Table";

const TableSection = ({ query }) => {
  const { data } = useData(query);
  const column =
    data.length > 0 &&
    Object.keys(data[0]).map((key, value) => {
      return {
        Header: data[0][key],
        accessor: key,
      };
    });
data.shift();
  const columns = useMemo(() => column, [column]);
  const queryData = useMemo(() => data, [data]);
  return (
    <div className="col-start-2 col-end-3 row-start-3 row-end-4 mt-3 text-black w-1/2 overflow-x-scroll">
      {data.length > 0 && <Table columns={columns} data={queryData} />}
    </div>
  );
};

export default TableSection;

Anyone please help me with this.