How to extract UTM parameters properly in React to auto-submitted the data within a form

When I'm sending the data with my code the inputs fields (utm_source, utm_medium and utm_campaign) are empty, but the email input is working, I don't really know what I'm doing wrong in my code.

Note: The connection to sending the data is working properly, the problem seems to be in the React code, that is sending empty values of utm_source, utm_medium and utm_campaign.

Code:

import { useRef, useEffect, useState } from "react"


export default function Testing_Form() {
    const [utmSource, setUtmSource] = useState("")
    const [utmMedium, setUtmMedium] = useState("")
    const [utmCampaign, setUtmCampaign] = useState("")
    const [defaultEmail, setDefaultEmail] = useState("")
    const [formSubmitted, setFormSubmitted] = useState(false)
    const btnRef = useRef(null)

    const submitForm = () => {
        console.log("Submited!")
    }

    useEffect(() => {
        const urlParams = new URLSearchParams(window.location.search)
        const utmSrc = urlParams.get("utm_source")
        const utmMdn = urlParams.get("utm_medium")
        const utmCg = urlParams.get("utm_campaign")

        console.log("utmSrc:", utmSrc)
        console.log("utmMdn:", utmMdn)
        console.log("utmCg:", utmCg)

        if (utmSrc && utmMdn && utmCg && !formSubmitted) {
            setFormSubmitted(true)
            setUtmSource(utmSrc)
            setUtmMedium(utmMdn)
            setUtmCampaign(utmCg)
            setDefaultEmail("test@gmail.com")
        }
    }, [])

    return (
        <>
            {console.log(utmCampaign)}
            {console.log(defaultEmail)}

            <div>
                <form name="formData" id="formData">
                    <label style= htmlFor="utm_source">
                        Source
                    </label>
                    <input
                        style=
                        type="text"
                        id="utm_source"
                        name="utm_source"
                        value={utmSource}
                        required
                    />
                    <br />
                    <label style= htmlFor="utm_medium">
                        Medium
                    </label>
                    <input
                        style=
                        type="text"
                        id="utm_medium"
                        name="utm_medium"
                        value={utmMedium}
                        required
                    />
                    <br />
                    <label style= htmlFor="utm_campaign">
                        Campaign
                    </label>
                    <input
                        style=
                        type="text"
                        id="utm_campaign"
                        name="utm_campaign"
                        value={utmCampaign}
                        required
                    />
                    <br />
                    <label style= htmlFor="email">
                        Email
                    </label>
                    <input
                        style=
                        type="email"
                        id="email"
                        name="email"
                        value={defaultEmail}
                        required
                    />
                    <input
                        id="btnSubmit"
                        type="submit"
                        value="Thanks for visiting us!"
                        ref={btnRef}
                        onClick={submitForm}
                    />
                </form>
            </div>
        </>
    )
}

I tried the .submit() alternative and produces an infinite loop. The only approach that makes the code works is simulate a click to the input of type 'submit' to send the data, but still sending only the email input field.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/1rvRLgp