Reactjs 反应：父道具正在传递给子组件，无头ui模式不工作

我在react中创建了一个带有忘记密码的登录页面。如果用户点击忘记密码链接，组件将在无头用户界面模式的帮助下出现。组件为ForgotPasswordComponent我的模式的初始状态来自登录页面。如果用户单击忘记密码链接，它将传递具有真实值的道具，然后组件将使用该道具作为其初始状态。但是我不知道为什么组件的useState没有改变

登录页面

const Login = ({ history }) => {
  const [modal, setModal] = useState(false);

  return (
    <FormContainer>
      <div className='bottom-actions'>
        <p className='font-sans text-xs text-customBlackLighter text-center mt-8'>
          Don't have an account?&nbsp;
          <Link
            to='/register'
            className='text-customRed font-semibold hover:underline'
          >
            Sign Up
          </Link>
          <Link
            className='text-customRed font-semibold mt-2 block hover:underline'
            onClick={() => setModal(true)}
          >
            Forgot Password?
          </Link>
        </p>
        {modal && <ForgotPassword modal={(modal) => setModal(modal)} />}
      </div>
    </FormContainer>
  );
};

const Login=（{history}）=>{
const[modal，setModal]=useState（false）；
返回(

你没有账户吗？
注册
setModal（真）}
>
忘记密码了？

{modal&&setModal（modal）}/>}
);
};

放弃密码

const ResetPassword = ({ modal }) => {
  console.log(modal); <--- every time i click the forgot password link the return value is true 
  const [open, setOpen] = useState(modal);
console.log(open); <--- every time i click the forgot password link the return value is False
  return (
    <Transition.Root show={open} as={Fragment}>
      <Dialog
        as='div'
        static
        className='fixed z-10 inset-0 overflow-y-auto'
        initialFocus={cancelButtonRef}
        open={open}
        onClose={setOpen}
      >
        <div className='flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0'>
          <form noValidate onSubmit={handleOnSubmit}>
            <Transition.Child
              as={Fragment}
              enter='ease-out duration-300'
              enterFrom='opacity-0'
              enterTo='opacity-100'
              leave='ease-in duration-200'
              leaveFrom='opacity-100'
              leaveTo='opacity-0'
            >
              <Dialog.Overlay className='fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity' />
            </Transition.Child>
            {/* This element is to trick the browser into centering the modal contents. */}
            <span
              className='hidden sm:inline-block sm:align-middle sm:h-screen'
              aria-hidden='true'
            >
              &#8203;
            </span>
            <Transition.Child
              as={Fragment}
              enter='ease-out duration-300'
              enterFrom='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
              enterTo='opacity-100 translate-y-0 sm:scale-100'
              leave='ease-in duration-200'
              leaveFrom='opacity-100 translate-y-0 sm:scale-100'
              leaveTo='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
            >
              <div className='bg-white w-1/4 text-left inline-block align-bottom p-12 rounded-lg overflow-hidden shadow-xl transform transition-all sm:align-middle'>
                <div className='mt-3 text-center'>
                  <Dialog.Title
                    as='h1'
                    className='font-sans md:text-4xl text-customRed font-bold text-center'
                  >
                    Don't worry
                  </Dialog.Title>
                  
                <div className='form-group w-full relative mt-6'>
                  <InputField
                    type='text'
                    placeholder='Email Address'
                    name='email'
                    border={
                      error && error.emailError ? 'failed' : 'transparent'
                    }
                    onChange={handleOnChange}
                  />
                </div>
                <div className=''>
                  <Button
                    type='submit'
                    caption='Send Reset Link'
                    className='w-full bg-customRed hover:bg-customRed-dark'
                  />
                </div>
              </div>
            </Transition.Child>
          </form>
        </div>
      </Dialog>
    </Transition.Root>
  );
};

const ResetPassword=（{modal}）=>{
控制台日志（模态）；