Amplifyでサブディレクトリに会員登録フォームを実装する方法

#概要
下記のようなサブディレクトリにAmplifyで会員登録フォームを実装したいと考えています。
https://hohoge.com/signUp/

コードは下記のようになります。
index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import {
  BrowserRouter as Router,
  Route,
} from 'react-router-dom'

import App from './App';
import Home from './pages/Home';
import SignUp from './pages/SignUp'
import SignIn from './pages/SignIn'

ReactDOM.render(
  <Router>
    <App>
      <Route exact path="/" component={Home}></Route>
      <Route path="/SignUp" component={SignUp}></Route>
      <Route path="/SignIn" component={SignIn}></Route>
    </App>
  </Router>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

App.jsx

import React, { useContext, useEffect } from 'react';
import { Component } from 'react';
import logo from './logo.svg';
/**
 * React Dom Router
 */
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link  
} from 'react-router-dom'

/**
 * Amplify
 */
import Amplify, {Auth} from 'aws-amplify'
import { withAuthenticator, Authenticator, SignIn, SignUp } from 'aws-amplify-react';
import '@aws-amplify/ui/dist/style.css'
import awsconfig from './aws-exports'
Amplify.configure(awsconfig)


class MyApp extends React.Component {
  render (){
    return(
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="SignIn">ログイン</Link></li>
          <li><Link to="SignUp">会員登録</Link></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
}

export default MyApp;

SignUp.jsx

/**
 * 会員登録画面
 */
import React from 'react';
import '../App.css';
import logo from '../logo.svg';
import { Component, useEffect, useContext, useState } from 'react';
import {Redirect} from 'react-router-dom'

/**
 * Amplify
 */
import Amplify, {Auth} from 'aws-amplify'
import { withAuthenticator, Authenticator, SignIn, SignUp } from 'aws-amplify-react';
import '@aws-amplify/ui/dist/style.css'
import awsconfig from '../aws-exports'
Amplify.configure(awsconfig)


function SingUp() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          会員登録画面
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

  
  const signUpConfig = {
      header: '会員登録',
      signUpFields: [
        {
          label: 'メールアドレス',
          key: 'email',
          required: true,
          displayOrder: 1,
          type: 'string'
        },
        {
          label: 'パスワード',
          key: 'password',
          required: true,
          displayOrder: 2,
          type: 'string'
        },
        {
          label: 'SNSアカウントの種類',
          key: 'custom:SNS_account_type',
          required: true,
          displayOrder: 3,
          type: 'string'
        },
        {
          label: 'SNSアカウントのID',
          key: 'custom:SNS_account_id',
          required: true,
          displayOrder: 4,
          type: 'string'
        },
      ],
      hideAllDefaults: true,
      defaultCountryCode: '1',
    };
    const usernameAttributes = 'メールアドレス';
  export default withAuthenticator(SignUp, {signUpConfig,usernameAttributes});

コンパイルしローカルで実行した所、トップページは表示されます。サブディレクトリのSignUpは、真っ白になってしまい登録フォームが表示されません。
エラーも表示されていないのですが、どこに原因があると考えられますか？

宜しくお願いします。