react-modal won't close after onClick event from another component - reactjs

Question

first time exploring Gatsby and tried to install react-modal. Added modal component inside my ComponentOne and inside the modal is another component which is ComponentTwo where the close trigger resides. Already passed the onClick to ComponentTwo but still no luck. I think I miss something.
ComponentOne
import React, { Component } from "react"
import ComponentTwo from "./ComponentTwo"
import Modal from 'react-modal'
export default class ComponentOne extends Component {
constructor(props) {
super(props);
this.state = {
showModal: false
};
this.handleOpenModal = this.handleOpenModal.bind(this);
this.handleCloseModal = this.handleCloseModal.bind(this);
}
handleOpenModal() {
this.setState({ showModal: true });
}
handleCloseModal() {
this.setState({ showModal: false });
}
render() {
return (
<div className="container mx-auto h-50">
<Modal
isOpen={this.state.showModal}
ariaHideApp={false}
style={cotentStyle}
>
<ComponentTwo onClick={this.handleCloseModal} /> // this is component two
</Modal>
</div>
)
}
}
ComponentTwo
import React from 'react'
import { TiDelete } from 'react-icons/ti'
const NavContent = ({ data }, props) => (
<>
<div className="bg-black z-10 absolute inset-0">
<button onClick={props.onClick} className="text-white absolute top-0 right-0 my-4 mx-4">
<TiDelete size={'2em'} />
</button>
</div>
</>
)
export default function Nav(props) {
return (
<StaticQuery
query={worksQuery}
render={data => <NavContent data={data} {...props} />}
/>
)
}

Answer 1

Try with:
export default function Nav({onClick}) {
return (
<StaticQuery
onClick={onClick}
query={worksQuery}
render={data => <NavContent data={data} {...props} />}
/>
)
}