Amplify configuration with pre-made apiGateway (api) and Cognito (auth)

app.jsx

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import Amplify, { API } from "aws-amplify";
import { withAuthenticator } from "aws-amplify-react";

Amplify.configure({
  Auth: {
    identityPoolId: "us-east-1:af865d51-my-identity-pool930304c62ee1",
    region: "us-east-1",
    userPoolId: "us-east-1_mypoolid",
    userPoolWebClientId: "10mbr00hmywebclientidasdjpq5",
  },
  API: {
    endpoints: [
      {
        name: "discord-sample-API",
        endpoint:
          "https://dv2l9frcvh.execute-api.us-east-1.amazonaws.com/default",
      },
    ],
  },
});
function App() {
  const [apiData, setApiData] = React.useState("");

  const handleClick = async () => {
    const data = await API.get("discord-sample-API", "/discord-sample", {
      headers: {
        "x-api-key": "n6yzKskMyAPIKeyB2tWunlRC",
      },
    }).catch((e) => console.log(e));
    setApiData(data.body);
  };
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>data from API: {apiData}</p>
        <button onClick={handleClick}>Click to show API data</button>
      </header>
    </div>
  );
}

export default withAuthenticator(App);