react bootstrap offcanvas custom close button - reactjs

Question

I got offcanvas working on react using bootstrap. Now I want add a custom close button but it doesn't seems to work. Please guide me on what I'm doing wrong.
<Offcanvas
show={show}
placement="bottom"
onHide={handleClose}
{...props}
className={css["offcanvas-bottom"]}
>
<Offcanvas.Header className="p-0">
<button type="button" class="btn-close text-reset new_close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
<div className={css["pop-image"]}>
<Image
src="https://xxxxxxx/2022030117344459.jpg"
fluid
/>
</div>
</Offcanvas.Header>
<Offcanvas.Body>
Some text as placeholder. In real life you can have the elements you
have chosen. Like, text, images, lists, etc.
</Offcanvas.Body>
</Offcanvas>

Answer 1

I used onClick in my custom button. And toggled the state by doing
const toggleOffcanvas = () => setShow(!show)
Example:
function ToggleSidebarOffcanvas(){
const [show, setShow] = useState(false);
const toggleOffcanvas = () => {
setShow(!show);
};
return (
<Button onClick={toggleOffcanvas}>
Menu
<SidebarOffcanvas show={show} toggleOffcanvas={toggleOffcanvas} />
</Button>)
}
function SidebarOffcanvas({ show, toggleOffcanvas }) {
return (
<Offcanvas className="w-25" show={show} scroll={true} backdrop={false}>
<Offcanvas.Header
className="p-0"
style={{
backgroundColor: "#008069",
color: "white",
}}
>
<Offcanvas.Title>
<div
className="d-flex align-items-end w-100 mb-2 lh-1"
>
<div className="p-2" onClick={toggleOffcanvas}>
<FiArrowLeft />
</div>
<h5 className="ms-3">Profile </h5>
</div>
</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
<div >
...
</div>
</Offcanvas.Body>
</Offcanvas>
);
}