Где рендерить модальные окна в ReactJS?

Question

[Alexander]

Где лучше рендерить модальные окна в vitual dom reactjs?
Стоит ли использовать порталы для модальных окон в react и можно ли использовать этот подход объявления окон внутри компонента, там где они используются?

const [visibleModal, setVisibleModal] = React.useState<'signIn' | 'signUp' | undefined>()

  const handleClickOpenSignIn = (): void => {
    setVisibleModal('signIn')
  }

  const handleClickOpenSignUp = (): void => {
    setVisibleModal('signUp')
  }

  const handleCloseModal = (): void => {
    setVisibleModal(undefined)
  }

    <Grid container wrap='wrap-reverse' className={classes.wrapper}>
      <Grid item container xs={12} sm={12} md={5} lg={6} className={classes.leftSide}>
        <div className={classes.previewPhoto}>
          <TwitterIcon className={classes.largeLogo} />
        </div>
      </Grid>
      <Grid
        item
        container
        justify='center'
        direction='column'
        xs={12}
        sm={12}
        md={7}
        lg={6}
        className={classes.rightSide}
      >
        <div className={classes.loginSizeWrapper}>
          <TwitterIcon className={classes.smallLogo} color='primary' />

          <Typography className={classes.loginTitle} variant='h2'>
            Happening now
          </Typography>
          <Typography className={classes.loginSubtitle} variant='h3'>
            Join Twitter today.
          </Typography>
          <div className={classes.btnWrapper}>
            <Button onClick={handleClickOpenSignUp} className={classes.loginBtn} variant='contained' color='primary'>
              Sign up
            </Button>
            <Button className={classes.loginBtn} onClick={handleClickOpenSignIn} variant='outlined' color='primary'>
              Log in
            </Button>

            <LoginModal open={visibleModal === 'signIn'} onClose={handleCloseModal} />
            <RegisterModal open={visibleModal === 'signUp'} onClose={handleCloseModal} />
          </div>
        </div>
      </Grid>
    </Grid>