Can't display bootstrap modal onClick - reactjs

Question

I have a problem to display the bootstrap modal in my react-website. Here is my code:
import React,{Component} from 'react';
import './restaurant.css';
import {connect} from "react-redux";
import {IoMdArrowBack} from 'react-icons/io';
import './restaurantMenu.css';
import DishDetailModal from "./dishDetailModal";
class RestaurantMenu extends Component{
renderDishes = (dishes)=>{
console.log(dishes);
return dishes.map((item,index)=>{
console.log(item);
{
if (item.isAvailable === true) {
return (
<div key={index} className="dishContainer">
<button className="dishButton" onClick={()=><DishDetailModal/>}>
<text style={{fontWeight: 'bold'}}>{item.name}</text>
<br/>
<text>{item.discription}</text>
<br/>
<text>{item.price} €</text>
</button>
</div>
)
}else{
return(
<div key={index} className="dishContainer">
<text style={{fontWeight: 'bold'}}>{item.dishTitle}</text>
<br/>
<text>{item.dishDescription}</text>
<br/>
<text>{item.dishPrice} €</text>
</div>
)
}
}
})
}
render(){
return(
<div style={{textAlign:'center'}}>
<br/>
<div className="backButtonClass">
<button
className="backButton"
onClick={this.props.showMenuFunction}
>
<IoMdArrowBack size={40}/>
</button>
</div>
<br/>
{this.renderDishes(this.props.requestedData[this.props.restaurantId].dishes)}
</div>
)
}
}
In the renderDishes-function I want to render return all the dishes and wrap each in a button that opens the modal with specific dish-information. My problem is that the modal doesn't show up onClick. Here is the modal-component:
import React,{Component} from 'react';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
export default class DishDetailModal extends Component{
constructor(props) {
super(props);
this.state={
show: true
}
}
handleModal = () =>{
this.setState({show: !this.state.show})
};
render(){
return (
<>
<Button variant="primary" onClick={()=>this.handleModal}>
Launch demo modal
</Button>
<Modal show={this.state.show} onHide={()=>this.handleModal}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={()=>this.handleModal}>
Close
</Button>
<Button variant="primary" onClick={()=>this.handleModal}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
}
}