Opening MUI modal from a button in react-table not working

Question

I have a react-table with one of the columns containing buttons for each row which should be used to view the row details using a modal from MUI.

Here is the snippet of my column data for the table:

export const COLUMNS = [
{...},
{
    Header: 'Actions',
    Cell: (row) => (
        <span>
            {row.row.original.id !== null ? (
                <>
                    <button value={row.row.original.id} onClick={(e) => handleModal(e, row.row.original.id)}>
                        <FontAwesomeIcon icon={someIcon} />
                    </button>
                </>
            ) : "No ID!"}
        </span>
    ),
    className: 'actions'
}

];

In another file, I have this handleModal function:

export function handleModal(e, row) {
const [open, setOpen] = useState(false);
setOpen(true);

console.log('Row details: ', row);

return (  
    <BasicModal open={open} onClose={() => setOpen(false)} row={row}/>
)

}

Then the BasicModal component in a separate file:

export default function BasicModal(props) {

// const {row, open, handleClose} = props;
// const [open, setOpen] = React.useState(true);
// const handleOpen = () => setOpen(true);
// const handleClose = () => setOpen(false);

console.log("PROPS in MODAL", props);

return (
    <div>
        {/* <Button onClick={handleOpen}>Open modal</Button> */}
        <Modal
            open={props.open}
            onClose={props.onClose}
            aria-labelledby="modal-modal-title"
            aria-describedby="modal-modal-description"
        >
            <Box sx={style}>
            <Typography id="modal-modal-title" variant="h6" component="h2">
                Text in a modal
            </Typography>
            <Typography id="modal-modal-description" sx={{ mt: 2 }}>
                Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
            </Typography>
            </Box>
        </Modal>
    </div>
);

}

I not sure why the modal is not showing anything and how to make it work and I also keep getting this Minified React error saying:

Invalid hook call. Hooks can only be called inside of the body of a function component.
This could happen for one of the following reasons: 
  1. You might have mismatching versions of React and the renderer (such as React DOM) 
  2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Answer 1

So it was dumb of me not to read thoroughly the minified error mentioned and as the documentation said,

🔴 Do not call (hooks) in event handlers.

So what I did instead is to create a modal function and called it instead of a button.

export const COLUMNS = [
{...},
{
    Header: 'Actions',
    Cell: (row) => (
        <span>
            {row.row.original.id !== null ? (
                <>
                    <BasicModal row={row.row.original.id} />
                </>
            ) : "No ID!"}
        </span>
    ),
    className: 'actions'
}

];