How to prevent redirection to json upon submitting a custom mailchimp form

Question

I'm currently working on integrating a custom Mailchimp subscription form into my React application. However, I'm facing an issue where upon submitting the form, it redirects to the Mailchimp JSON response URL. I want to handle the form submission asynchronously within my React app, without the redirection.

Here's the relevant part of my code:

function Contact() {
    const [email, setEmail] = useState('');
    const [loading] = useState(false);
    const [firstname, setFirstname] = useState('');

    return (
        <form action="https://gmail.us12.list-manage.com/subscribe/post-json?...." method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" className="validate" target="_blank">
            <input type="email" name="EMAIL" className="" placeholder="Enter your email" value={email} onChange={e => setEmail(e.target.value)} />
            <input type="text" name="FNAME" className="" placeholder="Enter your first name" value={firstname} onChange={e => setFirstname(e.target.value)} />
            <button type="submit" className="" isLoading={loading}>Subscribe</button>
        </form>
    );
}

export default Contact;

i tried to implement the suggested Ajax solution with jQuery here, I'm still facing the same redirection issue upon form submission. the form is still being redirected to the Mailchimp JSON response URL.

Could someone guide me through the steps or provide an example of how I can achieve this? I'd really appreciate any help or insights on this matter.

Thank you in advance!