How can I use this react-hook function in my code?

I am trying to customize my Amplify UI... I am not sure how to proceed. I am trying to use this custom function in my code:

    import Amplify, { Auth } from 'aws-amplify';



export default class SignupPage extends Component {
  handleSignUp = event => {
    event.preventDefault();
    const{username, email, password, phone_number} = this.props.inputs;
    Auth.signUp({
      username,
      password,
      attributes:{
        email,
        phone_number
      },
      validationData: []
    })
      .then(data => console.log(data))
      .then(()=>this.props.switchComponent("Verify"))
      .catc(err => console.log(err))
    };
}

function SignupPage() {
  const [firstFocus, setFirstFocus] = React.useState(false);
  const [lastFocus, setLastFocus] = React.useState(false);
  const [emailFocus, setEmailFocus] = React.useState(false);
  const [passwordFocus, setPasswordFocus] = React.useState(false);
  React.useEffect(() => {
    document.body.classList.add("signup-page");
    document.body.classList.add("sidebar-collapse");
    document.documentElement.classList.remove("nav-open");
    window.scrollTo(0, 0);
    document.body.scrollTop = 0;
    return function cleanup() {
      document.body.classList.remove("signup-page");
      document.body.classList.remove("sidebar-collapse");
    };

  }, []);

but I keep getting this error:

Any help would be appreciated!