Диалоговое окно пользовательского интерфейса материала закрыть диалоговое окно из внутреннего компонента

У меня есть диалоговое окно входа, которое я создал с использованием пользовательского интерфейса материала, но я использую отдельный компонент для кнопки входа.

Как закрыть диалоговое окно при нажатии кнопки? Это кнопка отправки в компоненте SigninForm, которую я хочу закрыть диалоговое окно. Я использовал код из образца материала пользовательского интерфейса, за исключением того, что я извлек его из некоторых и использовал свои собственные компоненты, поскольку мне нужна кнопка внутри SigninForm, потому что я меняю форму между этой и SignupForm.

Приложение:

function App() {
    return (
        <AppContainer>
            <SampleDialogueDemo />
        </AppContainer>
    );
}

Образец диалога:

function SampleDialogue(props) {
    const { onClose, selectedValue, open } = props;

    const handleClose = () => {
        onClose(selectedValue);
    };

    return (
        <Dialog onClose={handleClose} open={open}>
            <AccountBox />
        </Dialog>
    );
}

SampleDialogue.propTypes = {
    onClose: PropTypes.func.isRequired,
    open: PropTypes.bool.isRequired,
};

export default function SampleDialogueDemo(props) {
    const [open, setOpen] = useState(false);

    const handleClickOpen = () => {
        setOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
    };

    return (
        <div>
            <button onClick={handleClickOpen}>Click Me</button>
            <SampleDialogue onClose={handleClose} open={open} />
        </div>
    );
}

Учетная запись:

export function AccountBox() {
    const [isExpanded, setExpanded] = useState(false);
    const [active, setActive] = useState('signin');

    const playExpandingAnimation = () => {
        setExpanded(true);
        setTimeout(() => {
                setExpanded(false);
            },
            expandedTransition.duration * 1000 - 1500);
    };

    const switchToSignup = () => {
        playExpandingAnimation();
        setTimeout(() => {
            setActive('signup');
        }, 400);
    };

    const switchToSignin = () => {
        playExpandingAnimation();
        setTimeout(() => {
            setActive('signin');
        }, 400);
    };

    const contextValue = { switchToSignup, switchToSignin };

    return (
        <AccountContext.Provider value={contextValue}>
            <BoxContainer>
                <TopContainer>
                    <BackDrop initial={false}
                              animate={isExpanded ? 'expanded' : 'collapsed'}
                              variants={backdropVariants}
                              transition={expandedTransition} />
                    {active === 'signin' &&
                    <HeaderContainer>
                        <HeaderText>Create</HeaderText>
                        <HeaderText>Account</HeaderText>
                        <SmallText>Please sign-up to continue!</SmallText>
                    </HeaderContainer>
                    }
                    {active === 'signup' &&
                    <HeaderContainer>
                        <HeaderText>Welcome</HeaderText>
                        <HeaderText>Back</HeaderText>
                        <SmallText>Please sign-in to continue!</SmallText>
                    </HeaderContainer>
                    }
                </TopContainer>
                <InnerContainer>
                    {active === 'signin' && <SigninForm />}
                    {active === 'signup' && <SignupForm />}
                </InnerContainer>
            </BoxContainer>
        </AccountContext.Provider>
    );
}

Форма входа:

export function SigninForm() {
    const { switchToSignup } = useContext(AccountContext);

    return <BoxContainer>
        <Marginer direction={'vertical'} margin={15} />
        <FormContainer>
            <Input type={'email'} placeholder={'Email'} />
            <Input type={'password'} placeholder={'Password'} />
            <Marginer direction={'vertical'} margin={10} />
            <MutedLink href={'#'}>Forgot Password?</MutedLink>
            <Marginer direction={'vertical'} margin={'1.6em'} />
------->    <Submit type={'submit' onClick={CLOSE DIALOG HERE}>Sign In</Submit>
            <Marginer direction={'vertical'} margin={'1em'} />
            <MutedLink href={'#'}>
                Don't have an account?
                <BoldLink href={'#'} onClick={switchToSignup}>Sign Up</BoldLink>
            </MutedLink>
        </FormContainer>
    </BoxContainer>;
}

Хорошо, мне пора на работу. Пришлось добавить

 const {handleClose} = props

в моей функции AccountBox, а затем изменить

{active === 'signin' && <SigninForm  />}

до

{active === 'signin' && <SigninForm onClick={handleClose} />}

Тогда я мог бы закрыть его из SigninForm.