Using 'useState' for string inside Popover doesn't work properly

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Steps:

1. Instead of hard coding the text, use 'useState' instead for Popover for children value.

e.g. {text}. // This will cause issue

   <Popover
       id={id}
       open={open}
       anchorEl={anchorEl}
       onClose={handleClose}
       anchorOrigin={{
         vertical: 'bottom',
         horizontal: 'left',
       }}
     >
       <Typography sx={{ p: 2 }}>{text}</Typography>
     </Popover>

e.g. Hard coding text will not cause issue.

  <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
      >
        <Typography sx={{ p: 2 }}>HARD CODE TEXT</Typography>
      </Popover>

Current behavior 😯

Link to live example:

https://codesandbox.io/s/nfxd61?file=/demo.tsx

Issue:

When using 'useState' to toggle text that is inside Popover, notice the Popover closes but you will see div with empty text will fade away before closes completely. However, hard coding the text works fine.

https://user-images.githubusercontent.com/91907117/228026976-7fafb692-856d-4dbb-8f31-84c19bd9c88c.mov

Code:

import * as React from 'react';
import Popover from '@mui/material/Popover';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';

export default function BasicPopover() {
  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);

  const [text, setText] = React.useState('');

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setText('hello');
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
    setText('');
  };

  const open = Boolean(anchorEl);
  const id = open ? 'simple-popover' : undefined;

  return (
    <div>
      <Button aria-describedby={id} variant="contained" onClick={handleClick}>
        Open Popover
      </Button>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
      >
        <Typography sx={{ p: 2 }}>{text}</Typography>
      </Popover>
    </div>
  );
}

Expected behavior 🤔

I believe it should just close without having to see fade away.

Context 🔦

I just want to close the Popover with text used with 'useState'

Your environment 🌎

I am using example from MUI:

Link to MUI Popover: https://mui.com/material-ui/react-popover/

Example

Start with the linked CodeSandbox and the MUI Popover example to reproduce the closing transition with state-driven children. Trace how Popover handles its close transition when the child text is cleared, and verify the fix by confirming that closing no longer shows an empty fading element while hard-coded text remains unaffected.