onValidated is not a function when trying to subscribe user to mailchimp

Question

I am using "react-mailchimp-subscribe" to integrate with MailChimp and enable users to signup to a mailchimp mailing list upon completing an submitting my form.

However, I get the error:

Uncaught TypeError: onValidated is not a function

When I trigger the function that should submit the form info to MailChimp.

Here is a sample of my code:

import MailchimpSubscribe from "react-mailchimp-subscribe";
...
const CustomForm = ({
  className,
  topOuterDivider,
  bottomOuterDivider,
  topDivider,
  bottomDivider,
  hasBgColor,
  invertColor,
  split,
  status,
  message,
  onValidated,
  ...props
}) => {
...
  const [email, setEmail] = useState('');
  const [fullName, setFullName] = useState('');
  const handleSubmit = (e) => {
    console.log('handlesubmit triggered')
    e.preventDefault();
    email &&
    fullName &&
    email.indexOf("@") > -1 &&
    onValidated({
        EMAIL: email,
        MERGE1: fullName,
    });
  }
...
<form onSubmit={(e) => handleSubmit(e)}>
        <h3>
            {status === "success"
                ? "You have successfully joined the mailing list"
                : "Join our mailing list by completing the form below"
            }
        </h3>
        <div className="cta-action">
            <Input
                id="email"
                type="email"
                label="Subscribe"
                labelHidden hasIcon="right"
                placeholder="Your email address"
                onChange={e => setEmail(e.target.value)}
                value={email}
                isRequired
                >
            </Input>
            <Input
                id="name"
                type="text"
                label="Subscribe"
                labelHidden hasIcon="right"
                placeholder="Your full name"
                onChange={e => setFullName(e.target.value)}
                value={fullName}
                isRequired
                >
            </Input>
            <Input
                type="submit"
                formValues={[email, fullName]}
            />
        </div>
    </form>

This is the parent component passing down props to the above:

import React from "react";
import MailchimpSubscribe from "react-mailchimp-subscribe";

const MailchimpFormContainer = props => {

    const postURL = `https://*li$%.list-manage.com/subscribe/post?u=${process.env.REACT_APP_MAILCHIMP_U}$id=${process.env.REACT_APP_MAILCHIMP_ID}`;
    return (
        <div>
        <MailchimpSubscribe
            url={postURL}
            render={({ subscribe, status, message }) => (
                <CustomForm
                    status={status}
                    message={message}
                    onValidated={ formData => subscribe(formData) }
                />
            )}
        />
        </div>
    );
};