How to consume external API using Amplify?

I am using AWS amplify for my app. I am testing locally before I do any push to Amplify and am currently running the amplify app run npm start

I tried to consume an external API (https://api.github.com/users/hacktivist123) to render some data but I cant seem to get the data. It keeps showing as 404 error which I am unsure why. Any ideas?

import logo from "./logo.svg";
import "@aws-amplify/ui-react/styles.css";
import {
  withAuthenticator,
  Button,
  Heading,
  Image,
  View,
  Card,
} from "@aws-amplify/ui-react";

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

Amplify.configure({
    API: {
        endpoints: [
            {
                name: "backendapi",
                endpoint: "https://api.github.com/users/hacktivist123",
                paths: ['/']
            }
        ]
    }
});

API.configure();
const apiName = 'backendapi';

API
  .get(apiName)
  .then(response => {
    console.log("hello")
  })
  .catch(error => {
    console.log(error.response);
 });

function App({ signOut }) {
  return (
    <View className="App">
      <Card>
        <Image src={logo} className="App-logo" alt="logo" />
        <Heading level={1}>We now have Auth!</Heading>
      </Card>
      <Button onClick={signOut}>Sign Out</Button>
    </View>
    
  );
}

//export default withAuthenticator(App);
export default (App);

// import logo from './logo.svg';
// import './App.css';

// function App() {
//   return (
//     <div className="App">
//       <header className="App-header">
//         <img src={logo} className="App-logo" alt="logo" />
//         <p>
//           Edit <code>src/App.js</code> and save to reload. This is testing.
//         </p>
//         <a
//           className="App-link"
//           href="https://reactjs.org"
//           target="_blank"
//           rel="noopener noreferrer"
//         >
//           Learn React
//         </a>
//       </header>
//     </div>
//   );
// }

// export default App;