React: Submit a form from its parent form component (with two seperate handleSubmits)

How can I refactor this code to submit a form from its parent form? That is, I have a form that is embedded in another form component and when I submit on the button of the parent component, I want to trigger the subcomponent's own handleSubmit function if the subscribe checkbox is ticked.

Here is my parent component:

import MailchimpSubscribe from "react-mailchimp-subscribe";

const url = "https://blahblahblah";

export default function Contact() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [checked, setChecked] = useState(true);
  const [emailData, setEmailData] = useState();
  const [submitData, setSubmitData] = useState(false);

  const handleCheck = () => {
    setChecked(!checked);
    if (checked === false) {
      setEmailData("");
    }
  };

  const handleEmail = e => {
    setEmail(e.target.value);
    setEmailData(e.target.value);
  };

  return (
    <div className={styles.main}>
      <Head>
        <title>Subway Sauna | Contact Us</title>
        <Favicon />
      </Head>
      <Layout>
        <h1 className={styles.heading}>Drop us a message!</h1>
        <Form className={styles.form} onSubmit={handleSubmit}>
          <FormGroup className={styles.formGroup}>
            <Label for="email">Email</Label>
            <Input
              type="email"
              name="email"
              id="email"
              placeholder="Enter email"
              value={email}
              onChange={handleEmail}
              className={styles.formInput}
              required
            />
          </FormGroup>

          <FormGroup check>
            <Label check>
              <Input type="checkbox" checked={checked} onChange={handleCheck} />{" "}
              Subscribe to our Newsletter!
            </Label>
          </FormGroup>

          <div className={styles.buttonContainer}>
            <Button color="danger" type="submit">
              Submit
            </Button>
          </div>
        </Form>
        <div>
          <CustomForm
            emailData={emailData}
            onSubmitted={formData => subscribe(formData)}
          />
        </div>
      </Layout>
    </div>
  );
}

And here is my subcomponent:

function CustomForm({ status, message, onValidated, emailData }) {
  let email, name;
  const submit = () =>
    email &&
    email.value.indexOf("@") > -1 &&
    onValidated({
      EMAIL: email.value
    });

  return (
    <div
      style={{
        background: "#efefef",
        borderRadius: 2,
        padding: 10,
        display: "inline-block"
      }}
    >
      {status === "sending" && <div style={{ color: "blue" }}>sending...</div>}
      {status === "error" && (
        <div
          style={{ color: "red" }}
          dangerouslySetInnerHTML={{ __html: message }}
        />
      )}
      {status === "success" && (
        <div
          style={{ color: "green" }}
          dangerouslySetInnerHTML={{ __html: message }}
        />
      )}
      <br />
      <input
        style={{ fontSize: "2em", padding: 5 }}
        ref={node => (email = node)}
        type="email"
        placeholder={emailData}
        value={emailData}
      />
      <br />
      <button style={{ fontSize: "2em", padding: 5 }} onClick={submit}>
        Submit
      </button>
    </div>
  );
}

I know this looks really messy but it's the only way I can think of to be able to subscribe somebody to my Mailchimp mailing list while they are submitting an inquiry.