amplify-ui: "Error: Maximum update depth exceeded" when attempting to render Authenticator component with React 18's createRoot API

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Authenticator

How is your app built?

Create React App

Please describe your bug.

Trying to render the Authenticator or withAuthenticator components with React 18’s createRoot API results in errors being thrown.

This newer render API might also be the cause of the Authenticator not rendering properly on newer Next.js (>= v12.1.1) apps built using create-next-app.

What’s the expected behaviour?

Authenticator components should render without errors

Help us reproduce the bug!

1. npx create-react-app my-app
2. cd my-app
3. npm i aws-amplify @aws-amplify/ui-react
4. copy paste provided code snippets into respective files
5. npm run start
6. Authenticator may render for a few seconds, try interacting with it to trigger the errors

Code Snippet

// index.js

import React from "react";
import * as ReactDOMClient from "react-dom/client";
import App from "./App";
import { Amplify } from "aws-amplify";
import awsmobile from "./aws-exports";

import "./index.css";

Amplify.configure(awsmobile);

const container = document.getElementById("root");

const root = ReactDOMClient.createRoot(container);

root.render(<App />);

// App.js

import { withAuthenticator } from "@aws-amplify/ui-react";

const App = () => {
  return <h1>Welcome</h1>;
};

export default withAuthenticator(App);

Additional information and screenshots