我在Reaction中制作了一个模式窗口.我创建了一个名为modalbool的状态，并在modalbool为真时显示模式窗口.我创建了一个名为BackDrop的父组件，并在单击背景时关闭了模式窗口.但是，即使我单击了作为子组件的modalContainer组件，modalClosefunc也会被执行，并且模式窗口也会关闭.当只按下背景组件时，如何使modalbool变为False并关闭模式窗口？
这是我的代码
const Backdrop = styled.div`
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top:0;
left: 0;
background-color: rgba(0,0,0,0.7);
width: 100vw;
height: 100vh;
`
const ModalContainer = styled.div`
position: relative;
width: 700px;
height: 600px;
background-color: lightcoral;
`;
const [modalbool, setModalbool] = useState(false);
{modalbool ? (
<Backdrop onClick={modalClosefunc}>
<ModalContainer>
</ModalContainer>
</Backdrop>
) : null