Show react component on click - reactjs

Question

So I'm creating a website for the receptionists at a doctor's office. In order to make a new booking, I have a plus button, and when you click it, I want the makeBooking component to pop up and then there's also a cancel button.
Currently, I am struggling to make the component appear onClick.
This is my code:
This is in the appointments component above return
// handleBooking
const [showResults, setShowResults] = React.useState(false)
const handleBooking = () => setShowResults(true)
This is in return:
<button class='addBtn' id="btn"><div className='plus-icon' onClick={handleBooking}><UilPlus/></div></button>
{ showResults ? <MakeBooking /> : null }
And this is my component:
import React from 'react';
import { UilTimes } from '#iconscout/react-unicons';
const MakeBooking = () => {
return (
<div>
<div className='appointments-form'>
<form id="homeForm">
<button class='closeBtn' id="btn"><div className='close-icon'><UilTimes/></div></button>
<div className='heading'>
<h1>Make booking</h1>
<h3>Let's get this clients pet booked!</h3>
</div>
<div className='new-book-container home'>
<input list="docList" className='booking-input home' type='text' placeholder='doctor'/>
<datalist id="docList">
<option value="Sarah"/>
<option value="Josh"/>
<option value="Daina"/>
<option value="Tanielle"/>
<option value="Tony"/>
</datalist>
<input list="clientList" className='booking-input home' type='text' placeholder='client'/>
<datalist id="clientList">
<option value="Sarah"/>
<option value="Josh"/>
<option value="Daina"/>
<option value="Tanielle"/>
<option value="Tony"/>
</datalist>
<input className='booking-input home' type='date' placeholder='Date'/>
<input className='booking-input home' type='time' placeholder='time'/>
<input className='booking-input home' type='number' placeholder='room'/>
<button className='primary-btn' id='btn'>Book appointment</button>
</div>
</form>
</div>
</div>
);
};
export default MakeBooking;

Answer 1

Try this it will work:
const [showResults, setShowResults] = React.useState(false)
const handleBooking = event => {setShowResults(true)};
{ showResults && <MakeBooking /> }