Пользовательский интерфейс AWS Amplify Authentication для React скрыт

Question

Я пытаюсь настроить интерфейс AWS Amplify Authentication.(только для страницы регистрации)

Я создал React App, используя create-Reaction-app для тестирования Amplify, и я хочу изменить форму регистрации.Мне нужна форма регистрации без номера телефона, поэтому я создал 'MySignUp.jsx', который расширяет Компонент SignUp.Однако, когда я нажал кнопку регистрации, моя форма регистрации не отображалась.Мне интересно, почему это произошло и как это решить.

Вот мой App.js

import * as React from "react"
import logo from './logo.svg';
import './App.css';
import awsconfig from './aws-exports';

import Amplify from 'aws-amplify';

import {
  ConfirmSignIn,
  ConfirmSignUp,
  ForgotPassword,
  SignIn,
  VerifyContact,
  withAuthenticator,
} from "aws-amplify-react";
import MySignUp from './MySignUp';

Amplify.configure(awsconfig);

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default withAuthenticator(App,false, [
  <SignIn />,
  <ConfirmSignIn />,
  <VerifyContact />,
  <MySignUp override={'SignUp'} />,
  <ConfirmSignUp />,
  <ForgotPassword />,
])

Вот мой MySignUp.jsx

import React from 'react';

import { Auth } from 'aws-amplify';
import {
    SignUp,
    FormSection,
    SectionHeader,
    SectionBody,
    SectionFooter,
    InputRow,
    ButtonRow,
    Link,
} from 'aws-amplify-react';

export default class MySignUp extends SignUp {

    signUp() {
        const { username, password, email } = this.inputs;
        const param = {
            username: username,
            password: password,
            attributes:{
                email: email,
            }
        }
        Auth.signUp(param)
            .then(() => this.changeState('confirmSignUp', username))
            .catch(err => this.error(err));
    }

    showComponent(theme) {
        const { hide } = this.props;
        if (hide && hide.includes(SignUp)) { return null; }

        return (
            <FormSection theme={theme}>
                <SectionHeader theme={theme}>{'Sign Up Account'}</SectionHeader>
                <SectionBody theme={theme}>
                <InputRow
                        autoFocus
                        placeholder={'Username'}
                        theme={theme}
                        key="username"
                        name="username"
                        onChange={this.handleInputChange}
                    />
                    <InputRow
                        placeholder={'Password'}
                        theme={theme}
                        type="password"
                        key="password"
                        name="password"
                        onChange={this.handleInputChange}
                    />
                    <InputRow
                        placeholder={'Email'}
                        theme={theme}
                        key="email"
                        name="email"
                        onChange={this.handleInputChange}
                    />
                    <ButtonRow onClick={this.signUp} theme={theme}>
                        {'Sign Up'}
                    </ButtonRow>
                </SectionBody>
                <SectionFooter theme={theme}>
                    <div style={theme.col6}>
                        <Link theme={theme} onClick={() => this.changeState('confirmSignUp')}>
                            {'Confirm a Code'}
                        </Link>
                    </div>
                    <div style={Object.assign({textAlign: 'right'}, theme.col6)}>
                        <Link theme={theme} onClick={() => this.changeState('signIn')}>
                            {'Sign In'}
                        </Link>
                    </div>
                </SectionFooter>
            </FormSection>
        )
    }
}