extending AWS Amplify SignIn class to have a custom login form using Material UI

MySignIn.js

import React from 'react';

import { SignIn } from 'aws-amplify-react';

import {
  Card, CardContent,
  Button, ButtonBase,
  Input, InputAdornment, IconButton, InputLabel,
  FormControl, FormHelperText,
  Typography, MuiThemeProvider,
} from '@material-ui/core';

import {
  Visibility, VisibilityOff,
} from '@material-ui/icons';

import theme from '../../themes/login';
import './MyTheme.css';

class MySignIn extends SignIn {
  state = {
    showPassword: false,
  }

  forgotPasswordClick = () => this.changeState('forgotPassword')

  handleClickShowPassword = () => {
    this.setState(state => ({ showPassword: !state.showPassword }));
  };

  showComponent() {
    const { showPassword } = this.state;

    return (
      <div className="Auth-wrapper">
        <MuiThemeProvider theme={theme}>
          <Card raised={false} className="opaque">
            <CardContent className="root">
              <Typography variant="display1" align="center" paragraph>
                Sign in
              </Typography>
              <FormControl className="formControl">
                <InputLabel htmlFor="username">Username</InputLabel>
                <Input
                  autoFocus
                  fullWidth
                  id="username"
                  label="Username"
                  inputProps={{
                    key: 'username',
                    name: 'username',
                  }}
                  onChange={this.handleInputChange}
                />
              </FormControl>
              <FormControl className="formControl">
                <InputLabel htmlFor="password">Password</InputLabel>
                <Input
                  fullWidth
                  id="password"
                  inputProps={{
                    key: 'password',
                    name: 'password',
                  }}
                  onChange={this.handleInputChange}
                  type={showPassword ? 'text' : 'password'}
                  endAdornment={(
                    <InputAdornment position="end">
                      <IconButton
                        aria-label="Toggle password visibility"
                        onClick={this.handleClickShowPassword}
                      >
                        {showPassword ? <VisibilityOff /> : <Visibility />}
                      </IconButton>
                    </InputAdornment>
                  )}
                />
                <FormHelperText>
                  Forgot your password?
                  {' '}
                  <ButtonBase onClick={this.forgotPasswordClick} className="inlineTextButton">
                    Reset
                  </ButtonBase>
                </FormHelperText>
              </FormControl>
              <Button
                type="submit"
                fullWidth
                variant="contained"
                color="primary"
                onClick={this.signIn}
              >
                Sign In
              </Button>
            </CardContent>
          </Card>
        </MuiThemeProvider>
      </div>
    );
  }
}

export default MySignIn;