Creating a custom Modal for Material-Table - reactjs

Question

I am trying to create a custom button on my Material-Table that will pop up a model that will allow users to make changes. The issue I am running into is the button is not toggling to true when clicked upon. I am using a custom Modal hook. The modal itself work, because when it is explicitly set to true it pops up on the screen
here is the modal hook
const useModal = () => {
const [isShowing, setIsShowing] = useState(false);
function toggle() {
setIsShowing(!isShowing);
}
return {
isShowing,
toggle,
}
};
the modal component
const Modal = ({ isShowing, hide }) => isShowing ? ReactDOM.createPortal(
<React.Fragment>
<div className="modal-overlay"/>
<div className="modal-wrapper" aria-modal aria-hidden tabIndex={-1} role="dialog">
<div className="modal">
<div className="modal-header">
<button type="button" className="modal-close-button" data-dismiss="modal" aria-label="Close" onClick={hide}>
<span aria-hidden="true">×</span>
</button>
</div>
<p>
Hello, I'm a modal.
</p>
</div>
</div>
</React.Fragment>, document.body
) : null;
and finally the actual table component
columns: [
{ title: "Department", field: "department" },
{ title: "Security", field: "security", type: "numeric" },
{ title: "Status", field: "status" },
{
title: "Actions",
field: "actions",
render: rowData => (
<div className="edit-button">
<span className={" fas fa-pencil-alt"} onClick={toggle} />
{console.log(isShowing)}
<Modal isShowing={isShowing} hide={toggle} />
</div>
)
}
],
data: [{ department: "Admin", security: 10, status: "Active" }]
});
<MaterialTable
title="Departments"
columns={state.columns}
data={state.data}
editable={{
onRowAdd: newData =>
new Promise(resolve => {
setTimeout(() => {
resolve();
setState(prevState => {
const data = [...prevState.data];
data.push(newData);
return { ...prevState, data };
});
}, 600);
})
}}
/>
I need the isShowing to toggle between true and false