selections not working if columns pulled from state?

In my application, I need to dynamically create the columns and then have the pull the columns from the state. However, when I do this, the code to update the row state does not work. Below is a simplified version, showing the issue. If you run this code, when you select the checkbox, the state does not get updated correctly.

If, however, I change BaseTable and set the columns= the actual array, then the selection process works.

Code that does not work
```
/* eslint-disable */
import React, { useState,useEffect } from 'react';
import BaseTable, { Column } from 'react-base-table';
import 'react-base-table/styles.css';

const MultiSelectTable = () => {
const [selectedRows, setSelectedRows] = useState([]);
const [columns, setColumns] = useState([])

useEffect(()=>{
setColumns(
[
{
key:"checkbox",
title:"",
width:50,
selectedRowKeys:{selectedRows},
cellRenderer:({ rowData }) => (
handleRowSelection({ rowData })}
/>
)}
,
{key:"name", dataKey:"name", title:"Name", width:200},
{key:"age", dataKey:"age", title:"Age", width:100}
]
)
},[])

const handleRowSelection = ({ rowData }) => {
const selectedRowKeys = [...selectedRows];
const rowIndex = selectedRowKeys.indexOf(rowData.id);

if (rowIndex !== -1) {
selectedRowKeys.splice(rowIndex, 1);
} else {
selectedRowKeys.push(rowData.id);
}

setSelectedRows(selectedRowKeys);
console.log(selectedRowKeys)
};

const data = [
{ id: 1, name: 'John Doe', age: 25 },
{ id: 2, name: 'Jane Smith', age: 30 },
{ id: 3, name: 'Bob Johnson', age: 35 },
// Add more data as needed
];

return (


);
};

export default MultiSelectTable;
```

Code that works:

```
/* eslint-disable */
import React, { useState,useEffect } from 'react';
import BaseTable, { Column } from 'react-base-table';
import 'react-base-table/styles.css';

const MultiSelectTable = () => {
const [selectedRows, setSelectedRows] = useState([]);

const handleRowSelection = ({ rowData }) => {
const selectedRowKeys = [...selectedRows];
const rowIndex = selectedRowKeys.indexOf(rowData.id);

if (rowIndex !== -1) {
selectedRowKeys.splice(rowIndex, 1);
} else {
selectedRowKeys.push(rowData.id);
}

setSelectedRows(selectedRowKeys);
console.log(selectedRowKeys)
};

const columns= [
{
key:"checkbox",
title:"",
width:50,
selectedRowKeys:{selectedRows},
cellRenderer:({ rowData }) => (
handleRowSelection({ rowData })}
/>
)}
,
{key:"name", dataKey:"name", title:"Name", width:200},
{key:"age", dataKey:"age", title:"Age", width:100}
]

const data = [
{ id: 1, name: 'John Doe', age: 25 },
{ id: 2, name: 'Jane Smith', age: 30 },
{ id: 3, name: 'Bob Johnson', age: 35 },
// Add more data as needed
];

return (


);
};

export default MultiSelectTable;

```

How can I load the columsn dynamically into state but still have the selection of rows work?