React+Amazon Cognitoを使用してユーザ画面の作成

お問い合わせありがとうございます。
React を使用して Amazon Cognito の ホストされた UI と同じような画面を実装したいという認識の上、ご案内させていただきます。
AWS Amplify と Amazon Cognito を使用し、あらかじめ構築された UI コンポーネントを用いることで、React で ホストされた UI と同等なものを作成することは可能だと考えられます。
参考：Pre-built UI components （あらかじめ構築された UI コンポーネント)
https://aws.amazon.com/jp/about-aws/whats-new/2021/12/aws-announces-aws-amplify-studio/

現在、ご共有いただいている情報からお客様側で発生しているエラーの原因を特定することは難しいのですが、下記のステップでセットアップが可能であることを確認いたしました。

解決策：
下記のステップを完了することで、Amazon Cognito の ホストされた UI と同じような画面を実装することが可能でございます。
お客様に言及いただいた通り、こちらには React の @aws-amplify/ui-react ライブラリーの withAuthenticator をご使用いただけます。

はじめに、AWS Amplify を用いた React プロジェクトのセットアップを行う必要がございます。
AWS Amplify の設定には、お客様の AWS アカウントより作成した IAM ユーザーのアクセスキーとシークレットキーが必要になります。
設定完了後、React アプリケーションの作成を行い、Amazon Cognito を用いた Authentication のセットアップへと進みます。
この際、アプリケーションに必要な AWS Amplify ライブラリーがインストール・インポートされていることを確認してください。
それぞれの詳細な手順に関しましては、下記の資料 [1, 2] をご覧ください。
参考：
[1] AWS アカウント での IAM ユーザーの作成
https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/id_users_create.html
[2] Amplify Dev Center Project Setup（英語のみ）
https://docs.amplify.aws/lib/project-setup/prereq/q/platform/js/

Amazon Cognito を用いた Authentication のセットアップ

1. Authentication を追加する
   下記のコマンドで、プロジェクトに Authentication の機能を追加します。
   amplify add auth
   この際に、どのように Authentication を設定するか（サインイン、サインアップの方法等）について質問されますので、それらの回答に応じて設定が完了します。
2. バックエンドのアップデート
   下記のコマンドで、設定した Authentication の情報を、AWS Amplify のバックエンドへアップデートします。
   amplify push
3. あらかじめ構築された UI コンポーネントの使用
   下記のコマンドで、ログイン・サインアップ・ログアウト時に使用される UI コンポーネントをインストールします。
   npm install aws-amplify @aws-amplify/ui-react
4. withAuthenticator の使用
   作成したプロジェクトより、src/App.js を開きます。下記のようにコードを編集し、あらかじめ構築された UI コンポーネントを使用します。

import { Amplify } from 'aws-amplify';

import { withAuthenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

import awsExports from './aws-exports';
Amplify.configure(awsExports);

function App({ signOut, user }) {
  return (
    <>
      <h1>Hello {user.username}</h1>
      <button onClick={signOut}>Sign out</button>
    </>
  );
}

export default withAuthenticator(App);

また、withAuthenticator は React の高階コンポーネント（ higher-order component; HOC）でございますため、withAuthenticator でその他下層のコンポーネントを囲って使用する必要がございます。

より詳細な設定を確認したい場合、下記のコマンドで AWS マネジメントコンソールへアクセスすることが可能でございます。
AWS マネジメントコンソール上では、Amazon Cognito に関する設定を確認・編集することが可能です。

amplify console

詳細に関しましては、下記の資料をご覧ください。
参考：Amplify Dev Center Authentication（英語のみ）
https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/

より具体的なサポートを必要とされる場合、是非以下のリンクよりサポートケースをご起票ください。
参考：サポートケースの管理・作成
https://docs.aws.amazon.com/ja_jp/awssupport/latest/user/case-management.html