Amplify UI login console could not be customized with single federated button

Question

I used to get a single federated button on the login screen as shown below using below code for AWS Amplify old version libraries.

The components are no longer supported in the new "@aws-amplify/ui-react": "^5.0.2". Can someone please help me modify the code to get the exact same view as shown?

I don't see much help in the Amplify docs available.

Package.json

    "@aws-amplify/ui-components": "^1.8.1",
    "@aws-amplify/ui-react": "^1.1.0",

Code

import React from "react";
import "./App.css";
import Users from "./components/users/users";
import { Amplify, Auth } from "aws-amplify";
import {
  AmplifyOauthButton,
  AmplifyAuthenticator
} from "@aws-amplify/ui-react";
import awsExports from "./aws-exports";

Amplify.configure(awsExports);
Auth.configure(awsExports);

function App() {
  return (
    <AmplifyAuthenticator >
    <AmplifyOauthButton slot="sign-in" />
    <div className="App">
    <Users></Users>
   </div>
    </AmplifyAuthenticator>
  );
}

export default App;

View Amplify Login Screen click which takes me to Okta Login