onChange on Reusable and Dynamic Select cause multiple events

This is a reusable component that I use on two select tags. When I both perform onChange on both of them, they both show up in the console.

Should I just use a separate component on each one? I do believe that they make be linked to using "this" but I'm still unfamiliar with it.

const FlightTypeComponent = ({flights, flightLocalType}) => {
const {flightType, flightTypeClick} = useBookingContext()
const {register, unregister, watch, setValue, formState: {errors}} = useForm({
    defaultValues: {
        flights: {
            domestic: "",
            international: ""
        }
        
    }
})

const regionSetter = ( regionType, regionValue) => {
    console.log(this)
    if (regionType === "international") {
        unregister("flights.domestic")
    }
    if (regionType === "domestic") {
        unregister("flights.international")
    }
    setValue(`flights.${regionType}`, regionValue)
    flightTypeClick(regionType, regionValue)
}

console.log(watch())

return (
    <div className="flex flex-col">
        <label className='absolute z-10'>{flightLocalType}</label>
        <select className={`${flightType === flightLocalType ? `bg-amber-200` : `bg-white`} 'relative h-20 '`} onChange={(e)=>regionSetter(flightLocalType, e.currentTarget.value)} >
            <option value="">___</option>
            {flights.map(({region, location})=> (
                <optgroup label={region}>
                    {Object.keys(location).map((eachProvince, index) => 
                    <option key={index} value={eachProvince} >{eachProvince}</option>
                    )}
                </optgroup>
            )
            )}
        </select>
    </div>
)
}