NextJS w/ Amplify Accessing 3rd Party API

Question

Quick Edit: I know some of my logs are dangerous, they're in the code just locally, not committed.

I am running into errors that I cannot resolve and I've been stuck for a few days now, reading through prior questions and looking at the documentation has left me confused.

I am trying to connect a third party API to my NextJs Amplify app.

The error I'm consistently running into is related to credentials that, I believe, refer to const client = new SSMClient({...}) code, but I'm honestly not sure.

My best guess is that I have something wrong with my AWS credentials as that's been a whole other learning experience, but I'm not sure what or how I would have missed a step, as I've been over this multiple times.

---

Here's all of my code (removing secrets, obviously)

.env.local (I also have same variables/values stored in Amplify, though I'm not sure if this is necessary or correct. The only exception is the BrevoAPI key, which I have stored in SMM per the AWS documentation. - https://docs.aws.amazon.com/amplify/latest/userguide/environment-variables.html). I'm also not sure if the cognito information is needed, or not.)

    NEXT_PUBLIC_aws_access_key_id=[redacted]
    NEXT_PUBLIC_aws_secret_access_key=[redacted]
    NEXT_PUBLIC_brevoapi=[redacted]
    NEXT_PUBLIC_cognitopool=[redacted]
    NEXT_PUBLIC_cognitoclient=[redacted]

GetSecret.js

    import { SSMClient, GetParameterCommand } from "@aws-sdk/client-ssm" 

    export default async function GetSecret() {

    var AWS = require("aws-sdk");

    AWS.config.update({
        accessKeyId: process.env.NEXT_PUBLIC_aws_access_key_id,
        secretAccessKey: process.env.NEXT_PUBLIC_aws_secret_access_key,
        region: 'us-east-2',
        credentials: new AWS.CognitoIdentityCredentials({
            IdentityPoolId: process.env.NEXT_PUBLIC_cognitopool,
        })
    })

    const client = new SSMClient({
        region: AWS.config.region,
        credentials: AWS.config.credentials.IdentityPoolId
    })

    const input = {
        Name: "BREVOAPI",
        WithDecryption: true,
    }

    console.log("client is: " + JSON.stringify({client}))

    const command = new GetParameterCommand(input)
    const response = await client.send(command)
    // var request = await ssm.getParameter(input).promise();
    console.log("request is " + response)
    return response
    // const response = await client.send(command)   
    }

JS-Form.jsx

    import GetSecret from './GetSecret'

    export default function JSForm() {

    // Handles the submit event on form submit.

    const handleSubmit = async (event) => {
      // Stop the form from submitting and refreshing the page.
      event.preventDefault()
   
      // Get data from the form.
      const secret = await GetSecret()
      console.log("secret is: " + secret)
      const fname = event.target.fname.value
      const lname = event.target.lname.value
      const email = event.target.email.value

      // API endpoint where we send form data.
      const endpoint = 'https://api.brevo.com/v3/contacts'
   
      // Form the request for sending data to the server.
      const options = {
        // The method is POST because we are sending data.
        method: 'POST',
        // Tell the server we're sending JSON.
        headers: {
            accept: 'application/json',
            'content-type': 'application/json',
            'api-key': secret
          },
        // Body of the request is the JSON data we created above
        body: JSON.stringify({
          attributes: {FIRSTNAME: fname, LASTNAME: lname},
          listIds: [8],
          updateEnabled: false,
          email: email
        })
      }
   
      // Send the form data to Brevo API and get a response.
      const response = await fetch(endpoint, options)
      const errorCode = res.ok ? false : res.status
      .then(response => response.json())
      .then(response => console.log(response))
      .catch(err => console.error(err, errorCode));

      // Get the response data from server as JSON.
      // If server returns the name submitted, that means the form works.
      // const result = await response.json()
    }
    
    return (
      <div className="hero">
      <form onSubmit={handleSubmit}>
        <div className="mx-auto">
          <div className="mt-10">
            <label className="label" htmlFor="fname">
              <span className="label-text-lg text-white">What is your first name? (optional)</span>
            </label>
            <input type="text" id="fname" placeholder="First Name (optional)" className="input input-bordered w-full max-w-xs placeholder-white" />
          </div>
          <div className="mt-10">
            <label className="label" htmlFor="lname">
              <span className="label-text-lg text-white">What is your last name? (optional)</span>
            </label>
            <input type="text" id="lname" placeholder="Last Name (optional)" className="input input-bordered w-full max-w-xs placeholder-white" />
          </div>
          <div className="mt-10">
            <label className="label">
              <span className="label-text-lg  text-white" htmlFor="emailAddress">What is your email?</span>
            </label>
            <input type="email" id="email" placeholder="Cthuhlu@PraiseBeUntoCthuhlu.com" className="input input-bordered w-full max-w-xs placeholder-white" required/>
          </div>
          <div className="text-white prose text-left flex-grow mt-10">
            ...
          </div>
          <div className="text-white prose mt-10">
            ...
          </div>
          <div>
            <button className="btn mt-10 mb-10 text-white font-bold bg-base-250" type="submit" rel="noopener noreferrer">
              Sign Up
            </button>
          </div>
        </div>
      </form>
      </div>
    )
  }

Additional Information

Initial bug I was trying to resolve is:

Unhandled Runtime Error \n Error: Credential is missing

I've occasionally been able to get this error to go away, but it gets replaced by other similar errors.