Закрытие модального окна в компоненте React

Практикую React, столкнулся с проблемой. Когда модальное окно активно(компонента LoginForm) при клике за его пределами, нужно закрывать. Подскажите как на реализовать на примере.

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

    const onNext = () => slider.current.next();

    const [active, setActive] = useState(false);
    const onStart = () => {
        setActive(true);
    };
    // const closeModal = (e) => {
    //     if (active) {
    //         setActive(!active);
    //     }
    // };



    return (
        <div className={cn()}>
            <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>
    );
};