I am using React Table in my dashboard project. I want to change the React Table column header name on every tab click. I am passing the name state as props in React table, but the Header text is not changing as per the props. Is this possible to change Column header inside it ?

Below is the code of react table component in which the tabName is the state that i am passing as props, which is not changing.

const BreakdownTable = ({ tabName }) => {
  // console.log(tabName);
  const data = React.useMemo(
    () => [
      {
        col1: "com.gumlet.limited-videoPlay",
        col2: "100",
        col3: "1.3k",
      },
    ],
    []
  );

  const columns = React.useMemo(
    () => [
      {
        Header: tabName,
        accessor: "col1",
      },
      {
        Header: "Unique Views",
        accessor: "col2",
      },
      {
        Header: "Total Views",
        accessor: "col3",
      },
    ],
    []
  );

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    // rows,
    prepareRow,
    page,
    canPreviousPage,
    canNextPage,
    pageOptions,
    // pageCount,
    gotoPage,
    nextPage,
    // previousPage,
    setPageSize,
    pageSize,
    state,
    setGlobalFilter,
  } = useTable(
    {
      columns,
      data,
      initialState: { pageSize: 15 },
    },
    useGlobalFilter,
    useSortBy,
    usePagination
  );

  const { globalFilter } = state;