Reactjs not calling Firebase function Nodemailer - reactjs

Question

I've created a contact form in ReactJS and am trying to send an email to myself using Nodemailer with firebase functions. The email will consist of whatever the person has filled out in the contact form.
I have tried the firebase function using postman and it works, I successfully receive an email when the endpoint is tried.
However when I try to call it in my React app, nothing is sent, and there are no errors reported. I have looked online to see what I am doing wrong but no luck.
Here is my code.
firebase functions index.js
// import needed modules
const functions = require("firebase-functions");
const nodemailer = require("nodemailer");
const office365Email = functions.config().outlook365.email;
const office365Password = functions.config().outlook365.password;
// create and config transporter
const transporter = nodemailer.createTransport({
host: "smtp.office365.com",
port: 587,
secure: false, // true for 465, false for other ports
auth: {
user: office365Email,
pass: office365Password,
},
});
// export the cloud function called `sendEmail`
exports.sendEmail = functions.https.onCall((data, context) => {
// for testing purposes
console.log(
"from sendEmail function. The request object is:",
JSON.stringify(data.body)
);
const email = data.email;
const name = data.name;
const message = data.message;
// config the email message
const mailOptions = {
from: email,
to: office365Email,
subject: "New message from the nodemailer-form app",
text: `${name} says: ${message}`,
};
return transporter.sendMail(mailOptions).then(() => {
return { success: true };
}).catch(error => {
console.log(error);
});
});
here is my reactjs code:
import React, {useRef, useState} from "react";
import {useAuth} from "../contexts/AuthContext";
import {useHistory} from "react-router-dom";
import firebase from 'firebase/app';
import classes from "./SyncManagerDemo.module.scss";
import {Button, Container, Form} from "react-bootstrap";
export default function ContactUs() {
const nameRef = useRef();
const emailRef = useRef();
const messageRef = useRef();
const firmRef = useRef();
const history = useHistory();
const [error, setError] = useState("")
const [loading, setLoading] = useState(false)
const sendEmail = firebase.functions().httpsCallable('sendEmail');
async function handleSubmit(e) {
e.preventDefault()
console.log("nameRef: " + nameRef.current.value);
console.log("emailRef: " + emailRef.current.value);
console.log("messageRef: " + messageRef.current.value);
return /*const test =*/ await sendEmail({
name: nameRef.current.value,
email: emailRef.current.value,
message: messageRef.current.value
}).then(result => {
return console.log("message sent");
}).catch(error => {
console.log("error occurred.");
return console.log(error);
});
}
return (
<React.Fragment>
<div className={classes.body}>
<Container>
<div className={classes.body}>
<h2>Contact Us</h2>
<Form onSubmit={handleSubmit}>
<Form.Group id="email">
<Form.Label>Email</Form.Label>
<Form.Control type="email" ref={emailRef} required/>
</Form.Group>
<Form.Group id="name">
<Form.Label>Name</Form.Label>
<Form.Control type="text" ref={nameRef} required/>
</Form.Group>
<Form.Group id="message">
<Form.Label>Message</Form.Label>
<Form.Control type="text" ref={messageRef} required/>
</Form.Group>
<Form.Group id="firm">
<Form.Label>Firm</Form.Label>
<Form.Control type="text" ref={firmRef} required/>
</Form.Group>
<Button disabled={loading} className="w-100" type="submit">
Send
</Button>
</Form>
</div>
</Container>
</div>
</React.Fragment>
)
not sure if this helps but my postman POST request body I send through looks like this which works:
{
"data": {
"email": "my email#email.com",
"name": "test name",
"message": "hello world"
}
}
Any and all help is appreciated.