Testing disappearance with React Testing Library fails

Question

I have a MUI Card component, and I've implemented an onClick handler which hides part of it (div element). I'm using react testing library to test the disappearance of this div.

Note: The div is not removed from the DOM, but rather get invisible: visibility='hidden', and the MUI classes changes to include MuiCollapse-hidden class.

For some reason the test fails. It seems that the click event fails or didn't complete yet.

This is the component code (stripped to relevant logic):

<MyCard onClick={handleCardClick}>
   <Collapse role={'description'}>
        <CardContent>
             content goes here...
        </CardContent>
   </Collapse>
</MyCard >

This is the testing code:

describe('Expand/Collapse the card', () => {
    let container: RenderResult;
    beforeEach (() => {
        container = render(<MyCard />);
    });
    test ('Clicking anywhere in the card hides the description', async () => {
        await waitFor(() => {
            fireEvent(container.container, new MouseEvent('click', {bubbles: true,cancelable: true}));
        })
        expect(container.getByRole('description')).toHaveClass('MuiCollapse-hidden');
    });
});

I'm getting the list of classes for this component which is the classes list when the card is in expanded mode

I've also tried:

await waitFor(() => {
      fireEvent.click(container.container);
})

Any idea why the click in the testing doesn't reflect the change?