React Material UI Modal - Can't access from parent

Question

I'm trying to createa modal component that can be "opened" with different props. Everything works fine (sending the props), with one exception.

I cant open the model from the parent....If i use the Child (modal) button it works fine, if i try to use a parent button i can't do anything. The modal is this one -> https://material-ui.com/utils/modal/

I've tried sending the "open" prop from parent to child, but that messes everything up (as in i see like a lot of modals opened and cant close them).

Here's how it looks like.

Modal (Child) component ->

            <Modal
                aria-labelledby="simple-modal-title"
                aria-describedby="simple-modal-description"
                open={this.props.open}
                onClose={this.handleClose}
            >

And from my Parent component (posts on a page) i've tried this ->

                <Modal modalTitle={post.acf.title} open={this.state.modalOpen}/>

I have defined the state in my parent as modalopen: false, but i always get an error on the modal saying that the prop is undefined UNLESS i also add

PortModal.defaultProps = { open: false, }

If i check in React DevTools i can see that my modals were created with open={false} and also they are sending the modal title properly (which works).

I don't understand why the modals open like 1000 times and i can't close them.

Is there any way to make this work with props or is there something else that i should try? I've tried using refs, but i am not really sure i did it right.

Thanks in advance.

Update with more code & a gif.

How i'm currently creating it is pretty much the same, but i also pass the close handler.

In componentDidMount

const MyModal = <Modal modalTitle={this.state.title} open={this.state.modalOpen} openHandler={this.handleOpen}/>
        this.setState({
            MyModal
        });

In render() i simply return that const.

const { MyModal } = this.state;
<div>
   {MyModal}
</div>

And my modal looks like this ->

  <div>
    <Typography gutterBottom>Click to get the full Modal experience!</Typography>
    <Button onClick={this.props.openHandler}>Open Modal</Button>
    <Modal
      aria-labelledby="simple-modal-title"
      aria-describedby="simple-modal-description"
      open={this.props.open}
      onClose={this.props.closeHandler}
    >
      <div style={getModalStyle()} className={classes.paper}>
        <Typography variant="title" id="modal-title">
          Text in a modal
        </Typography>
        <Typography variant="subheading" id="simple-modal-description">
          Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
        </Typography>
        <PortModalWrapped />
      </div>
    </Modal>
  </div>

So its pretty much the default card from the link above.

I tried calling it by either clicking the modal button, or another button that i have in my parent, which looks like this ->

<Button size="small" color="primary" onClick={openModal(post.acf.title)}>

And the function is

const openModal = (title) => {
    this.setState({
        title: title,
        openModal: true,
    });
};

None of the buttons work (i know i dont send the closehandler, its no use to even test that since i cant open the modal).

It does have a weird glitch whenever i click any of the buttons (scrollbar appearing and disappearing rly fast like it would be changing state or smthn).