class constructors must be invoked with 'new' error in React-native

So I'm trying to use react native and aws-amplify to build a web and mobile app with one code base. Now I just added the withAuthenticator component to my app which works fine on the mobile part but when i run the web app in the browser I'm unable to type into the authentication field that is if I click on it the cursor appears and emmediately dissapears suprisingly though if i click and hold I'm suddenly able to type aslong as I'm holding the mouse button. So after that I tried to instead create my custom authenticator which worked fine for mobile but on the web it returned the error class constructors must be invoked with 'new'. My code is below hope someone can help me with this. Thanks!

class MySignIn extends SignIn {
  constructor(props) {
    super(props);
    this.state = {
      username: null,
      password: null,
      error: null,
    };
    this.checkContact = this.checkContact.bind(this);
    this.signIn = this.signIn.bind(this);
  }

  render() {
    if (this.props.authState !== "signIn") {
      return null;
    }
    return (
      <View style={{ flex: 1, backgroundColor: "blue" }} behavior="padding">
        <Text>Stuff and Stuff</Text>
      </View>
    );
  }
}

export default withAuthenticator(Signout, false, [
  <MySignIn />,
  <ConfirmSignIn />,
  <VerifyContact />,
  <SignUp />,
  <ConfirmSignUp />,
  <ForgotPassword />,
  <RequireNewPassword />,
]);

class MySignIn extends SignIn is this correct? ive usually imported class of class MySignIn extends React.Component

and that works because they have imported signIn from

import { ConfirmSignIn, ConfirmSignUp, ForgotPassword, RequireNewPassword, SignIn, SignUp, VerifyContact, withAuthenticator } from 'aws-amplify-react';

and hence this is a custom class component , hence it works

// This is my custom Sign in component
class MySignIn extends SignIn {
  render() {
    ...
  }
} 

this works. Hope it helps