I'm trying to make a Custom Modal Component to use across an app I'm working on, in which I pass as a prop another component to show inside it, for example to load data for a user. But I'm struggling with an issue can't be solved: When the user clicks inside or outside the modal, it closes.
The main call to the modal looks like this:
export const ListTable = (data) => {
...
const [modalState, setModalState] = useState(false);
const toggleModal = () => { setModalState(!modalState) }
...
return (
...
<ModalWindow {...datos} isOpen={modalState} toggle={toggleModal}/>
And the Custom Modal looks like this
export const ModalWindow = (data = null) => {
const ComponentToShow = data.component;
return (
<>
<Modal
show={data.isOpen}
backdrop={"static"}
keyboard={true}
>
<Modal.Header closeButton>
<Modal.Title>Modal title</Modal.Title>```
</Modal.Header>
<Modal.Body>
<ComponentToShow data={data}/>
</Modal.Body>
</Modal>
</>
);}