Act Warning When Using MUI Popover - reactjs

Question

I am having a hard time getting a component to render without any act warnings from react. Here is the component that I am testing. It contains a TextField and a Popover. The idea is that the parent component controls when and what the Popover displays.
const PopoverContainer = (props: TextFieldWithPopoverProps) => {
const [anchorEl, setAnchorEl] = React.useState(null);
const anchorRef = React.useRef(null);
React.useEffect(() => {
setAnchorEl(anchorRef.current);
}, [anchorRef]);
return (
<>
<TextField type="text" ref={anchorRef}/>
<Popover id={props.popperId} open={props.open} sx={{ zIndex: 1001 }} anchorEl={anchorEl}>
<Paper>
{props.renderedChild}
</Paper>
</Popover>
</>
);
};
And here is the test.
test('should open popover', async () => {
const { rerender } = render(<PopoverContainer open={false} popperId="popper-id" renderedChild={renderInnerPopover()} />);
expect(screen.queryByText('Hello World!')).toBe(null);
await userEvent.type(await screen.findByRole('textbox'), 'HELLO');
rerender(<PopoverContainer open={true} popperId="popper-id" renderedChild={renderInnerPopover()} />);
expect(await screen.findByText('Hello World!'));
});
const renderInnerPopover = () => {
return (
<div>
Hello World!
</div>
);
};
And here is an example of a few of the act warnings that are reported.
Warning: An update to ForwardRef(FormControl) inside a test was not wrapped in act(...)
Warning: An update to ForwardRef(Popover) inside a test was not wrapped in act(...)
Act warnings are always on the rerender call. I have tried putting act() around the rerender call and the type event but neither fixes the problem. I have also tried not setting the TextField which does prevent the act warnings but of course that defeats what the component is trying to accomplish.

Answer 1

For anyone else running into a similar issue. I swapped userEvent for fireEvent for the typing event. Not sure if its a bug with the recent changes to userEvent or something that I am doing but it did resolve the problem.
test('should open popover', async () => {
const { rerender } = render(<PopoverContainer open={false} popperId="popper-id" renderedChild={renderInnerPopover()} />);
expect(screen.queryByText('Hello World!')).toBe(null);
// await userEvent.type(await screen.findByRole('textbox'), 'HELLO');
fireEvent.change(await screen.findByRole('textbox'), { target: { value: 'HELLO' } });
rerender(<PopoverContainer open={true} popperId="popper-id" renderedChild={renderInnerPopover()} />);
expect(await screen.findByText('Hello World!'));
});
const renderInnerPopover = () => {
return (
<div>
Hello World!
</div>
);
};