How to update the state of the table when new columns are dynamically added by user input?

[nathanbernardo]

Hey guys, so I want to add the feature of dynamically adding new columns to a table through user input. What would be the best updating the state of the table once a new column has been added so the new columns can be rendered? This is what I have so far for adding new columns to the table and rendering the added columns:

  const [count, setCount] = useState(0);

  const [columnState, setColumns] = useState<ColumnDef<ElementProps>[]>([
    {
      id: 'column 1',
      accessorFn: (rows) => rows.position,
      cell: (info) => info.getValue(),
      footer: (props) => props.column.id,
    },
    {
      accessorFn: (rows) => rows.mass,
      id: 'colum 2',
      cell: (info) => info.getValue(),
      header: () => <span>Mass</span>,
      footer: (props) => props.column.id,
    },
    {
      id: 'column 3',
      header: 'column 3',
      cell: (info) => info.getValue(),
    },
  ]);

  const columns = useMemo<ColumnDef<ElementProps>[]>(
    () => columnState,
    [columnState]
  );

 const table = useReactTable({
    data,
    columns,
    state: {
      sorting,
    },
    onSortingChange: setSorting,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    debugTable: true,
  });

  const addColumn = () => {
    const newColumn: ColumnDef<ElementProps> = {
      id: `position_${count}`,
      accessorFn: (row) => row.position,
      cell: (info) => info.getValue(),
      footer: (props) => props.column.id,
      header: 'position',
    };

    setColumns((old) => [...old, newColumn]);
    setCount(count + 1);
  };

return (
...
<Menu.Item onClick={addColumn}>Add Column</Menu.Item>
)