Incorrect Request Method (GET Instead of POST) Leads to 404 Error on Mailchimp API Endpoint

Question

I am encountering a 404 error when attempting to submit a form to the Mailchimp API using the 'gatsby-plugin-mailchimp' plugin. Here are the details:

Expected Behavior: I expected the form data to be successfully sent to the Mailchimp API, and the user to be subscribed to the mailing list.

Actual Behavior:

Upon clicking the signup button, a 404 error is returned from the Mailchimp API endpoint. The console logs show the following error message:

GET https://us23.api.mailchimp.com/3.0/lists/{list-id}/members&EMAIL=shubham%40gmail.com?c=__jp3 net::ERR_ABORTED 404 (Not Found)

Configuration:

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-mailchimp`,
      options: {
        endpoint: 'https://us23.api.mailchimp.com/3.0/lists/{list-id}/members', // Replace with your Mailchimp endpoint
        timeout: 5000,
      },
    },
  ],
};

// MyFormComponent.jsx

import React, { useState } from 'react';
import { addToMailchimp } from 'gatsby-plugin-mailchimp';

const MyFormComponent = () => {
  const [email, setEmail] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      const response = await addToMailchimp(email);
      console.log(response);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Email:
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </label>
      <button type="submit">Subscribe</button>
    </form>
  );
};

export default MyFormComponent;

Instead of post request it make a get request how can I fix this ?