How to open mdbootstrap modal from different component

Hello, I really tried to do it on myself but i'm new to react so I dont really understand how to pass it so it opens the modal.

I'm sure there is an easy fix for this, but for some reason I wasn't able to get this working I hope someone can help me with this would really appreciate it

Expected behavior When I click on one of the items it opens a modal.

Actual behavior Gives me errors TypeError: Cannot read property 'toggle' of undefined

Resources (screenshots, code snippets etc.)

Item.js

    return (
    <Fragment>
        <div
            ref={ref}
            style={{ opacity: isDragging ? 0 : 1 }}
            className={"item"}
            onClick={onOpen}
        >
            <div className={"color-bar"} style={{ backgroundColor: status.color }}/>
            <p className={"item-title"}>{item.content}</p>
            <p className={"item-status"}>{item.icon}</p>
        </div>

        <Modal item={item}  toggle={this.toggle} />

    </Fragment>
);

Modal.js:

export default function Modal(props){
const state = {
  modal: false
}

function toggle(){
  this.setState({
    modal: !this.state.modal
  });
}

return (
  <MDBContainer>
    <MDBModal isOpen={state.modal} toggle={toggle}>
      <MDBModalHeader toggle={toggle}>{props.item.title}</MDBModalHeader>
      <MDBModalBody>
      <h2>Description</h2>
      <p>{props.item.content}</p>
      </MDBModalBody>
      <MDBModalFooter>
        <MDBBtn color="secondary" onClick={toggle}>Close</MDBBtn>
        <MDBBtn color="primary">Save changes</MDBBtn>
      </MDBModalFooter>
    </MDBModal>
  </MDBContainer>
  );

}

When I click on this Item I want it to open my Modal: