reactjs - React で @aws-amplify を使用しているときにカスタム コンポーネントから認証状態を変更する

Question

Amplify Auth を React アプリケーションと統合しようとしています。

@aws-amplify/ui-react パッケージの AmplifyAuthenticator を使用して認証フローをカスタマイズしています。

AmplifySignIn コンポーネントを使用してカスタマイズすることもできますが、AmplifySignIn の代わりに完全にカスタムを作成したいと考えています。

以下は、私のカスタムコンポーネントがどのように見えるかです:

import React from 'react';
import { Auth } from 'aws-amplify';
import { useForm } from "react-hook-form";

export default function CustomSignIn(props){


    const { register, reset, errors, handleSubmit } = useForm();

    const onSubmit = async data => {
       
        await Auth.signIn(data.username, data.password);
       
    };

    return(
        <form className="mt-5" onSubmit={handleSubmit(onSubmit)} slot={props.slot}>
            <h4>Login</h4>
            <p>Need an account? <span>Create an account</span></p>

            <div className="form-group">
                <label>Email address</label>
                <input type="username" name="username" className="form-control" ref={register({required: true})}/>
            </div>
            <div className="form-group">
                <label>Password</label>
                <input type="password" name="password" className="form-control"  ref={register({required: true})}/>
            </div>
            <button type="submit" class="btn btn-primary btn-block">Continue</button>
        </form>
    );

}

以下は、認証状態を管理しようとしている方法です。

import React, {useEffect} from 'react';
import { AmplifyAuthenticator } from '@aws-amplify/ui-react';
import '../styles/App.scss';
import { AuthState, onAuthUIStateChange } from '@aws-amplify/ui-components';
import ProtectedRoutes from './ProtectedRoutes';
import logo from '../assets/logo.svg';
import CustomSignIn from '../modules/auth/CustomSignIn';

function App() {

  const [authState, setAuthState] = React.useState();
  const [user, setUser] = React.useState();

  useEffect(() => {

      return onAuthUIStateChange((nextAuthState, authData) => {
          setAuthState(nextAuthState);
          setUser(authData)
      });

  }, []);

  
  return ( authState === AuthState.SignedIn && user ) 
  ? 
  (
    <ProtectedRoutes />
  ) 
  : 
  (
    <div className="container-fluid container-fluid--auth">
      <div className="row">
        <div className="col-md-8">
          <div className="row">
            <div className="col-12 py-3">
              <img className="logo" src={logo} alt="logo" />
            </div>
          </div>
          <div className="row">
            <div className="col-md-4 offset-md-4">
              <AmplifyAuthenticator>
                <CustomSignIn slot="sign-in" />
              </AmplifyAuthenticator>
            </div>
          </div>
        </div>
        <div className="col-md-4 col--auth-sidebar">

        </div>
      </div>
    </div>
  );

} 


export default App;

問題は、ユーザーがサインインページの「アカウントの作成」ボタンをクリックしたときに、ユーザーをサインアップページに移動するにはどうすればよいですか?