Below is my code.However,when I click the place outside of the overlay,the overlay doesn't disappear.But I do add the rootClose and onHide as you can see in the code.I would be grateful if anyone could help.
import React, { useRef, useState } from "react";
import Overlay from 'react-overlays/Overlay'
function Overlayhtml () {
return (
<div>overlay works!</div>
)
}
export function OverlayTest () {
const btnRef = useRef()
const containerRef = useRef()
const [show, setShow] = useState(false)
const handleClick = () => {
setShow(!show)
}
const handleHide = () => {
setShow(false)
}
return (
<div ref={containerRef}>
<button ref={btnRef} onClick={handleClick}>btn</button>
<Overlay show={show} placement='bottom' target={btnRef.current} container={containerRef.current} rootClose={true} onHide={handleHide}>
{() => <Overlayhtml />}
</Overlay>
</div>
)
}