Use EmailJS with custom React components correctly

Question

I am trying to implement in a portfolio a functional form contact. I used to use smtpjs or AWS Lambda with a serverless function but this time I am trying to use EmailJS. I achieve to send an email to my account properly when the form is filled but the message does not show the email of the user and the text the user introduced and I do not know why exactly. Here it is my code:

export const Contact = () => {
  const email = useFormInput('');
  const message = useFormInput('');
  const [sending, setSending] = useState(false);
  const [complete, setComplete] = useState(false);
  const initDelay = tokens.base.durationS;

  const form = useRef()
  
  const sendEmail = (e) => {
    e.preventDefault();

    emailjs.sendForm('ID', 'KEY', form.current, 'SECRET')
      .then(alert("Message Sent! I'll reply you ASAP!"));

    e.target.reset()
  }

  return (
    <Section className={styles.contact}>
      <Meta
        title="Contact"
        description="Send me a message if you're interested in discussing a project or if you just want to say hi"
      />
      <Transition unmount in={!complete} timeout={1600}>
        {(visible, status) => (
          <form ref={form} onSubmit={sendEmail} className={styles.form}>
            <Heading
              className={styles.title}
              data-status={status}
              level={3}
              as="h1"
              style={getDelay(tokens.base.durationXS, initDelay, 0.3)}
            >
              <DecoderText
                text="Keep in Touch!"
                start={status !== 'exited'}
                delay={300} />
            </Heading>
            <Divider
              className={styles.divider}
              data-status={status}
              style={getDelay(tokens.base.durationXS, initDelay, 0.4)} />
            <Input
              name="mail"
              required
              className={styles.input}
              data-status={status}
              style={getDelay(tokens.base.durationXS, initDelay)}
              autoComplete="email"
              label="Your Email"
              type="email"
              maxLength={512}
              {...email} />
            <Input
              name="body"
              required
              multiline
              className={styles.input}
              data-status={status}
              style={getDelay(tokens.base.durationS, initDelay)}
              autoComplete="off"
              label="Message"
              type="email"
              maxLength={4096}
              {...message} />
            <Button
              className={styles.button}
              data-status={status}
              data-sending={sending}
              style={getDelay(tokens.base.durationM, initDelay)}
              disabled={sending}
              loading={sending}
              loadingText="Sending..."
              icon="send"
              type="submit"
            >
              Send message
            </Button>
          </form>
        )}
      </Transition>
      <Footer className={styles.footer} />
    </Section>
  );
};

Answer 1

Everything seems right. However the email that is received lacks the user's text input or email address. You must check that the name properties of the email and message inputs correspond to the keys used in the emailjs.sendForm method in order to make it work.

Hence, in the input components, modify the "name" attributes. Like that:

< Input
name = "from_email"
required
className = {
  styles.input
}
data - status = {
  status
}
style = {
  getDelay(tokens.base.durationXS, initDelay)
}
autoComplete = "email"
label = "Your Email"
type = "email"
maxLength = {
  512
} { ...email
}
/>

<
Input
name = "message"
required
multiline
className = {
  styles.input
}
data - status = {
  status
}
style = {
  getDelay(tokens.base.durationS, initDelay)
}
autoComplete = "off"
label = "Message"
type = "email"
maxLength = {
  4096
} { ...message
}
/>