Email handling is giving undefined in body

Project Title: Email handling is giving undefined in body

Description:
I am looking for a freelancer who can help me with my email handling issue. Currently, I am using the Sendgrid platform for my emails. However, I am facing a problem where the body of the emails is showing as undefined.

First name: undefined
Last name: undefined
Work email: undefined
School name: undefined
Phone number: undefined
Type of query: undefined
How can our team help you:
undefined

Here is the contact form code

<form method="POST" name="contact" onSubmit={handleSubmit} ref={formRef}>
<input type="hidden" name="contact" value="contact" />
<div className="form-group">
<div className="input-group">
<label htmlFor="firstname">First name<span>*</span></label>
<input className="input-0" type="text" name="firstname" />
<p className="error">{errors.firstname}</p>
</div>
<div className="input-group">
<label htmlFor="lastname">Last name<span>*</span></label>
<input className="input-0" type="text" name="lastname" />
<p className="error">{errors.lastname}</p>
</div>
</div>
<div className="form-group">
<div className="input-group">
<label htmlFor="email">Work email<span>*</span></label>
<input className="input-0" type="email" name="email" />
<p className="error">{errors.email}</p>
</div>
<div className="input-group">
<label htmlFor="companyname">School name<span>*</span></label>
<input className="input-0" type="text" name="companyname" />
<p className="error">{errors.companyname}</p>
</div>
</div>
<div className="form-group">
<div className="input-group">
<label htmlFor="phone">Phone number</label>
<input type="phone" name="phone" />
</div>
<div className="input-group">
<label htmlFor="query">Type of query<span>*</span></label>
<select name="query">
<option value="">Please select</option>
<option value="account">Account</option>
<option value="sales">Sales</option>
<option value="support">Support</option>
<option value="press">Press</option>
<option value="other">Other</option>
</select>
<p className="error">{errors.query}</p>
</div>
</div>
<div className="form-group">
<div className="input-group">
<label htmlFor="message">How can our team help you<span>*</span></label>
<textarea
type="text"
name="message"
placeholder="Tell us more about your team and what you’d like to manage with securiwiser.com"
/>
<p className="error">{errors.message}</p>
<p className="privacy-policy">
By clicking submit, I acknowledge receipt of the securiwiser.com{" "}
<Link className="sw-link" to="/privacy-policy/" target="_blank">
Privacy policy
</Link>
</p>
</div>
</div>
{!submitting ? (
<button
className="sw-primary-btn sw-nav-links sw-font-weight-md fom-btn"
type="submit"
>
Submit
</button>
) : (
<button
className="sw-primary-btn sw-nav-links sw-font-weight-md fom-btn"
type="button"
disabled
>
Submitting...
</button>
)}
</form>

this is the worker.js code snippet

if (request.method === "POST") {
const formData = new URLSearchParams(await request.text());
const requestFormData = Object.fromEntries(formData);
const firstName = requestFormData.firstname;
const lastName = requestFormData.lastname;
const workEmail = requestFormData.email;
const schoolName = requestFormData.companyname;
const phoneNumber = requestFormData.phone;
const queryType = requestFormData.query;
const message = requestFormData.message;

-----

{
type: "text/plain",
value: `Contact Form Submission:

First name: ${firstName}
Last name: ${lastName}
Work email: ${workEmail}
School name: ${schoolName}
Phone number: ${phoneNumber}
Type of query: ${queryType}
How can our team help you:
${message}`

When receiving email it gives undefined in email body:

Contact Form Submission:

First name: undefined
Last name: undefined
Work email: undefined
School name: undefined
Phone number: undefined
Type of query: undefined
How can our team help you:
undefined