reactjs Modal not being called - reactjs

Question

Hi everyone I am new to react but have the task to implement this modal. Unfortunately If I click on the button nothing happens. I could not find a solution and to my total confusion it seems like there are many different ways to implement this kind of modals.
Does anyone have a suggestion please?
The modal itself:
import React, { useState } from 'react'
import './BookingUpdate.css';
function Modal({ setOpenModal, children } : {setOpenModal:any, children:any}) {
if(!setOpenModal) return null;
return (
<div className="modalBackground">
<div className="modalContainer">
<div className="titleCloseBtn">
<button
onClick={() => {
setOpenModal(false);
}}
>
X
</button>
</div>
<div className="title">
<h1>Are You Sure You Want to Continue?</h1>
</div>
<div className="body">
<p>The next page looks amazing. Hope you want to go there!</p>
</div>
<div className="footer">
<button
onClick={() => {
setOpenModal(false);
}}
id="cancelBtn"
>
Cancel
</button>
<button>Continue</button>
</div>
</div>
</div>
);
}
export default Modal;
The file from which it is called:
import React, { useState } from 'react';
import FullLayout from '../components/FullLayout';
import Loading from '../components/Loading';
import { Booking, Formatting } from 'flexspace-commons';
import { Table, Form, Col, Row, Button } from 'react-bootstrap';
import { Search as IconSearch, Download as IconDownload, X as IconX , Settings as IconSettings } from 'react-feather';
import ExcellentExport from 'excellentexport';
import { withTranslation } from 'react-i18next';
import { TFunction } from 'i18next';
import type * as CSS from 'csstype';
import Modal from "../components/BookingUpdate";
interface State {
loading: boolean
start: string
end: string
modalIsOpen: boolean
}
interface Props {
t: TFunction
}
class Bookings extends React.Component<Props, State> {
data: Booking[];
constructor(props: any) {
super(props);
this.data = [];
let end = new Date();
let start = new Date();
start.setDate(end.getDate() - 7);
this.state = {
loading: true,
start: Formatting.getISO8601(start),
end: Formatting.getISO8601(end),
modalIsOpen: false
};
this.toggleBookingModal = this.toggleBookingModal.bind( this );
}
.
.
.
toggleBookingModal = (booking: Booking) => {
this.setState( { modalIsOpen: ! this.state.modalIsOpen } );
<Modal setOpenModal={this.state.modalIsOpen} >
</Modal>
}
renderItem = (booking: Booking) => {
const btnStyle: CSS.Properties = {
['padding' as any]: '0.1rem 0.3rem',
['font-size' as any]: '0.875rem',
['border-radius' as any]: '0.2rem',
};
return (
<tr key={booking.id}>
<td>{booking.user.email}</td>
<td>{booking.space.location.name}</td>
<td>{booking.space.name}</td>
<td>{Formatting.getFormatterShort().format(booking.enter)}</td>
<td>{Formatting.getFormatterShort().format(booking.leave)}</td>
<td><Button variant="info" style={btnStyle} onClick={() => this.toggleBookingModal(booking)}><IconSettings className="feather" /></Button></td>
<td><Button variant="danger" style={btnStyle} onClick={() => this.cancelBooking(booking)}><IconX className="feather" /></Button></td>
</tr>
);
}
.
.
.