React Hooks, передавая функции как объекты в объектах

Question

Я (все еще, к сожалению) пытаюсь преобразовать шаблон React + Material UI + Firebase (находится в документации по Material UI) с помощью хуков. В настоящее время в папке компонентов внутри src файл App.js показывает, что различные диалоги (то есть модалы) сначала передаются в компонент DialogHost, который, в свою очередь, выводит на экран различные диалоги в зависимости отчто пользователь щелкает и переключает (например, войти, чтобы дать диалоговое окно входа, зарегистрироваться, чтобы дать подписку) или статус аутентификации пользователя (например, профиль, чтобы дать диалог профиля или настройки, чтобы дать диалог настроек).

Прямо сейчас, без DialogHost, у меня есть моя регистрация и вход в рендеринг Dialog в App.js, как это (как это было сделано в шаблоне React + Material UI + Firebase repo до 26 июня),

       {/* SignUpDialog */}
        <Hidden only='xs'>
          <SignUpDialog
            open={signUpDialog}
            onClose={() => setSignUpDialog(false)}
          />
        </Hidden>
        <Hidden only={['sm', 'md', 'lg', 'xl']}>
          <SignUpDialog
            fullScreen
            open={signUpDialog}
            onClose={() => setSignUpDialog(false)}
          />
        </Hidden>

        {/* SignInDialog */}
        <Hidden only='xs'>
          <SignInDialog
            open={signInDialog}
            onClose={() => setSignInDialog(false)}
          />
        </Hidden>
        <Hidden only={['sm', 'md', 'lg', 'xl']}>
          <SignInDialog
            fullScreen
            open={signInDialog}
            onClose={() => setSignInDialog(false)}
          />
        </Hidden>

Моя проблема в том, что когда я заменяю этот код выше в моем App.js на один компонент DialogHost ... Я могу передать переменную boolean open, которая переключается наистина, когда пользователь нажимает на панель навигации. Однако у меня возникают проблемы при передаче реквизитов onClose, что позволяет закрыть диалоговое окно, если пользователь нажимает кнопку отмены ... В конечном итоге упрощенная версия выглядит следующим образом

App.js

const [signUpDialog, setSignUpDialog] = useState(false)
const [signInDialog, setSignInDialog] = useState(false)

. ,.

     <DialogHost
          signedIn={signedIn}
          dialogs={
            {
              signUpDialog: {
                dialogProps: {
                  open: signUpDialog,

                  onClose: () => setSignUpDialog(false) //HERE IS WHERE I AM UNSURE
                }
              },

              signInDialog: {
                dialogProps: {
                  open: signInDialog,

                  onClose: () => setSignInDialog(false) //AND HERE
                }
              }
            }
          }
        />

Dialog.js

const DialogHost = ({ signedIn, dialogs }) => {

const signUpDialog = dialogs.signUpDialog;
const signInDialog = dialogs.signInDialog;

return (
    <>
        <Hidden xsDown> //There is other hidden tags, but just not listing for simplicity 
            {!signedIn &&
                <>
                    <SignUpDialog
                        dialogProps={signUpDialog.dialogProps}
                    />
                    <SignInDialog
                        dialogProps={signInDialog.dialogProps}
                    />
                </>
            }
        </Hidden>

SignUpDialog.js

const SignUpDialog = ({ dialogProps }) => {
return (
        <Dialog fullWidth maxWidth="md" {...dialogProps}>
            <DialogTitle>
                Sign up for an account
            </DialogTitle>...
        <DialogActions><Button color='primary' onClick={dialogProps.onClose}>Cancel</Button></DialogActions>

Буду вечно благодаренесли кто-то знал, как помочь решить эту проблему, у меня