rootRef.current.contains is not a function on react-transition-group Transition Component on latest React and MUI v5?

I am migrating a project from Material-UI 4 to MUI v5, where I also upgraded react to v18. We are using Transition from react-transition-group on one of our components, inside of a Modal. I get a rootRef.current.contains is not a function error on a TrapFocus component. I am not using a TrapFocus component.

Here is my codesandbox example: https://codesandbox.io/s/wizardly-pare-gx08dc?file=/demo.js:0-847

import React from "react";
import { Transition } from "react-transition-group";
class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
  }
  render() {
    const { open } = this.state;
    return (
      <>
        <button
          onClick={() => {
            this.setState({ open: true });
          }}
        >
          Click Me
        </button>
        <Modal
          open={open}
          onClose={() => {
            this.setState({ open: false });
          }}
        >
          <Transition
            in={open}
            timeout={{
              enter: 0,
              exit: 500
            }}
          >
            <div>Hello</div>
          </Transition>
        </Modal>
      </>
    );
  }
}

export default Demo;

My environment is as follows:

"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@mui/icons-material": "^5.8.4",
"@mui/material": "^5.9.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-transition-group": "^4.4.2"

Any help on this would be appreciated.

Thank you

Alright, turns out I have to wrap the Transition in a div. but idk why that fixes this