Change auth state from custom component while using @aws-amplify with react

Question

I am trying to integrate Amplify Auth with a React application.

I am using AmplifyAuthenticator from @aws-amplify/ui-react package to customize the auth flow.

Though I can use AmplifySignIn component and customize it, I want to create a totally custom instead of AmplifySignIn.

Following is what my custom component looks like:

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>
    );

}

Following is how I am trying to manage auth state:

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;

The thing is, how do I take the user to the Sign Up page when the user clicks on the "Create an account" button on the Sign In page?