Next.js on change select option

Get value on form submit in Next.js

import React, { useState } from "react";

const defaultLocation = [
  { value: "Uk", label: "UK" },
  { value: "USA", label: "USA" },
];



export default function DashboardCreateJob () {


  const [location , SetLocation ] = useState('')

  const submitForm = async(e) => {
    e.preventDefault()

    console.log(location)
  }

  return (
    <>
    <form onSubmit={submitForm} >

        <div className="form-group">
            <label
            htmlFor="select2"
            className="d-block text-black-2 font-size-4 font-weight-semibold mb-4"
            >
            Location
            </label>
            <Select
            options={defaultLocation}
            className="form-control pl-0 arrow-3 w-100 font-size-4 d-flex align-items-center w-100 "
            border={false}
            value={location}
            onChange={event => SetLocation(event.value) }
            />
        </div>
    </form>
    </>

  )


}

OR

const [valueState,setValueState] = useState("")
// create a function that handle the React-select event and
// save the value of that event on an state every time the component change
    const handler = (event) => {
        const value = event.value
        setValueState(value)
    }
<Select options={"your options"} onChange={handler}/>