Twilio(Sendgrid) with Serverless integration using Formik

ContactForm.js

import React, { Component } from 'react'
import {Button, FormControl, InputLabel, Input, Box } from '@material-ui/core';
import Alert from '@material-ui/lab/Alert';
import { useFormik } from 'formik';
import * as Yup from 'yup';

const twilioURL = 'your twilio Function URL';
const zapierHook = 'Zapier Hook URL';

// To Clear form after we submit!


const RefContactForm = () => {
    const formik = useFormik ({
        initialValues: {
            firstName: '',
            lastName:'',
            company:'',
            email:'',
            country:'',
            city: '',
            leadSource:'Website',
            enquiry: ''
        },
        validationSchema: Yup.object({
            firstName: Yup.string()
             .required('First Name Required'),
            lastName: Yup.string()
             .required('Last Name Required'),
            company: Yup.string()
             .required('Company name Required'),
            email: Yup.string()
             .required('Email address required')
             .email('Invalid Email address'),
            country: Yup.string()
             .required('Country name is required')
        }),
        // onSubmit: values => {
        //     alert(JSON.stringify(values,null,2))
        // }
        onSubmit: 
        //Pass ResetForm helper to async/await function
        //If the response == 200, reset the form
            async (e, {resetForm}) => {
                const response = await fetch (twilioURL, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(e),
                }); 
                const res = await fetch(zapierHook, {
                    method: 'POST',
                    body: JSON.stringify(e),
                });

                if(response.status == 200 && res.status == 200 ) {
                    alert("'Thank you for your submission, we'll update you as soon as we can.");
                    resetForm();
                } else {
                    alert("'Please contact us at [email protected]'")
                }
            },
            
    });
    return (
        <form onSubmit={formik.handleSubmit}>
            <FormControl 
                fullWidth>
                    <InputLabel>First Name</InputLabel>
                    <Input
                        required
                        label="name"
                        name="firstName"
                        variant="filled" 
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        value = {formik.values.firstName}
                        type="text" /> 
                        { formik.errors.firstName && formik.touched.firstName ? 
                        <Alert severity="warning">{formik.errors.firstName}</Alert> 
                        : null }
            </FormControl>
            <FormControl 
                fullWidth>
                    <InputLabel>Last Name</InputLabel>
                    <Input
                        required
                        label="Last Name"
                        name="lastName"
                        variant="filled" 
                        onChange={formik.handleChange}
                        value = {formik.values.lastName}
                        type="text" /> 
                        {formik.errors.lastName && formik.touched.lastName ? 
                        <Alert severity="warning">{formik.errors.lastName}</Alert> : null }
            </FormControl>
            <FormControl 
                fullWidth>
                    <InputLabel>Company</InputLabel>
                    <Input
                        required
                        label="Company"
                        name="company"
                        variant="filled" 
                        onChange={formik.handleChange}
                        value = {formik.values.company}
                        type="text" /> 
                        {formik.errors.company && formik.touched.company ? 
                        <Alert severity="warning">{formik.errors.company}</Alert> : null }
            </FormControl>
            <FormControl 
                fullWidth>
                    <InputLabel>Email</InputLabel>
                    <Input
                        required
                        label="Email"
                        name="email"
                        variant="filled" 
                        onChange={formik.handleChange}
                        value = {formik.values.email}
                        type="text" /> 
                        {formik.errors.email && formik.touched.email ? 
                        <Alert severity="warning">{formik.errors.email}</Alert> : null }
            </FormControl>
            <FormControl 
                fullWidth>
                    <InputLabel>Country</InputLabel>
                    <Input
                        required
                        label="Country"
                        name="country"
                        variant="filled" 
                        onChange={formik.handleChange}
                        value = {formik.values.country}
                        type="text" /> 
                        {formik.errors.country && formik.touched.country ? 
                        <Alert severity="warning">{formik.errors.country}</Alert> : null }
            </FormControl>
            <FormControl 
                fullWidth>
                    <InputLabel>City</InputLabel>
                    <Input
                        label="City"
                        name="city"
                        variant="filled" 
                        onChange={formik.handleChange}
                        value = {formik.values.city}
                        type="text" /> 
            </FormControl>
            <FormControl 
                fullWidth>
                    <InputLabel>Enquiry</InputLabel>
                    <Input
                        label="Enquiry"
                        name="enquiry"
                        variant="filled" 
                        onChange={formik.handleChange}
                        value = {formik.values.enquiry}
                        type="text" /> 
            </FormControl>         
            <Box visibility="hidden">
                <FormControl >
                        <InputLabel>Lead Source</InputLabel>
                        <Input  
                            label="Lead Source"
                            name="Lead Source"
                            variant="filled" 
                            value="Website"
                            type="text"
                            disabled
                            />
                </FormControl>
            </Box>            
            <Button type="submit"
                    variant="outlined"
                    color="primary"
                    > 
                    Submit
            </Button>
        </form>
    )
}
       

export default RefContactForm