To use AWS Amplify React with hosted login (exclusively), try this approach

App.js snippets

import Redirector from './Components/Redirector';

const oauth = {
  domain: 'your.doma.in', // REPLACE
  label: 'Sign in',  // default label for OAuthButton
  redirectSignIn: window.location.origin + '/signin',
  redirectSignOut: window.location.origin + '/signout', // unused AFAICT
  responseType: 'code',
  scope: [ 'email', 'profile' ] // hosted auth uses User Pool settings
};
Amplify.configure({ oauth });

class App { ... }

// Do not put an Amplify Greetings header above the application
// Navigate to /signout to force sign out
const withGreetings = false;

// Use only one component when not logged in, to redirect to the hosted UI
const authComps = [ <Redirector label={oauth.label} /> ];

export default withAuthenticator(App, withGreetings, authComps);

Redirector.js

import React from 'react';
import { AuthPiece, OAuthButton, withOAuth } from 'aws-amplify-react';

class Redirector extends AuthPiece {
  state = {
    timer: null
  }

  constructor(props) {
    super(props);
    this._validAuthStates = ['signIn'];
  }
  
  componentDidMount() {
    // React can call componentDidMount twice in a row;
    // start a timer only on the first call
    if (!this.state.timer) {
      const delay = this.props.delay || 1500;
      this.setState({timer: setTimeout(this.props.OAuthSignIn, delay)});
    }
  }
  
  componentWillUnmount() {
    if (this.state.timer) {
      clearTimeout(this.state.timer);
      this.setState({timer: null});
    }
  }

  showComponent = (theme) => (
    <OAuthButton label={this.props.label} theme={theme} />
  );
}

export default withOAuth(Redirector);