Material UI Dialog throwing errors in Storyshot tests due to ReactDOM.createPortal/react-test-renderer workarounds

Question

"@material-ui/core": "4.12.3"
"@storybook/addon-storyshots": "6.3.12",
"@storybook/react": "6.3.12",
"react": "17.0.2",

Cannot use Dialog in a Storybook Storyshots test without errors, because the workarounds to get ReactDOM.createPortal and react-test-renderer to work together, causes the Material UI Dialog to throw console warnings in the tests.

I can workaround the first issue by either using the disablePortal property within Dialog stories or by mocking it out like this in testSetup:

jest.mock("react-dom", () => ({
    ...jest.requireActual("react-dom"),
    createPortal: (children: ReactNode) => children,
}));

Both these workarounds create a second issue, which is for every story that contains a Dialog we get a console warning creating a huge amount of noise in the test output.

"Warning: Material-UI: the modal content node does not accept focus. For the benefit of assistive technologies, the tabIndex of the node is being set to "-1"."

I have checked for duplicates and have several related issues like this one, however, it's not the same as the actual Dialogs and Storybooks work fine with no errors and are composed properly with an internal focusable DialogContent. This issue is only affecting the storyshot tests when the portal is mocked or bypassed.

If I add the disableAutoFocus property to each Dialog within the Storybooks, the console warnings go away, however it seems like a hack. Does anyone know why these warnings are appearing or a better way to resolve this?

Thanks