How to change AWS Amplify Authentication UI?

import React from "react";
import { SignUp } from "aws-amplify-react";

export class CustomSignUp extends SignUp {
  constructor(props) {
        super(props);
        this._validAuthStates = ["signUp"];
  }

  showComponent(theme) {
    return (
      <div className="row">
        <form>
          <div className="form-group">
            <label htmlFor="Username"
            >
              Username
            </label>
            <input
              className=""
              id="username"
              key="Username"
              name="Username"
              onChange={this.handleInputChange}
              type="text"
              placeholder="Username"
            />
          </div>
    <div className="form-group">
            <label htmlFor="email"
            >
              Email
            </label>
            <input
              className=""
              key="email"
              name="email"
              onChange={this.handleInputChange}
              type="text"
              placeholder="Email"
            />
          </div>
          <div className="form-group">
            <label htmlFor="password"
            >
              Password
            </label>
            <input
              className=""
              key="password"
              name="password"
              onChange={this.handleInputChange}
              type="password"
              placeholder="Password"
            />
          </div>
          <div className="form-group">
            <label htmlFor="phone_number"
            >
              Phone Number
            </label>
            <input
              className=""
              key="phone_number"
              name="phone_number"
              onChange={this.handleInputChange}
              type="text"
              placeholder="phone_number"
            />
          </div>
    <div className="form-group">
            <label
            >
            </label>
            <input
              className=""
              name="phone_number"
              onClick={super.signUp}
              type="button"
     value="Register"
            />
          </div>
        </form>  
      </div>
   <div className="row">
  <div className="col-12"
   <p>Go Back to 
    <Link to="#" onClick={() => super.changeState("signIn")}>Login</Link>
   </p>
  </div>
 </div>
    );
  }
}