如何关闭反应模态窗口

Question

告诉我如何在窗口外部单击以将其关闭？在主div上单击一下，但即使在窗体输入字段上单击也关闭。如何实现这个想法？

export default () => {
    const cn = useClassName('home-page');
    const slider = useRef();


    const onNext = () => slider.current.next();
    const [active, setActive] = useState(false);
    const onStart = () => {
        setActive(true);
    };
    const closeModal = () => {
        if (active) {
            setActive(!active);
        }
    };

    return (
        <div className={cn()} onClick={closeModal}>
            <Carousel dotsClass="test-className" ref={slider} effect="fade">
                {dataSet.map(elem =>
                    <Slider title={elem.title} img={elem.image} onNext={onNext} onStart={onStart} key={elem.index}/>
                )}
            </Carousel>
            <LoginForm style={active ? {display: 'block'} : {display: 'none'}}/>
        </div>
    );
};