I am using Nextjs14 and Supabase.

I have this select where the user can choose from. I am also passing it on the formValue which will be received on the server actions as FormData. Now, on the component, I can see the data of the formValue and the barangay field is there. However, passing in on the server actions, the barangay field can no longer be seen on the server actions.

This question is also posted on: https://stackoverflow.com/questions/77407716/values-of-the-form-can-be-seen-on-the-component-but-when-passing-it-to-the-serv

interface FormData {
  ...rest of the values
  barangay: string; 
}

const initialState = {
  message: null,
}

export default function WaterStationProfileForm() {
  const [state, formAction] = useFormState(addWaterStation, initialState)
  const [selectedBarangay, setSelectedBarangay] = useState<string>(''); // Rename the state variable


  const handleBarangaySelection = (value: string) => {
    setSelectedBarangay(value); //get the selected barangay
  }

  const [formValue, setFormValue] = useState<FormData>({
    ...rest of the values
    barangay: "",
  });
 

  useEffect(() => {
    setFormValue(prevFormValue => ({
      ...prevFormValue,
      barangay: selectedBarangay
    }))
  },[selectedBarangay])

  console.log(formValue, "form value") // I can see the value of barangay here


  return (
    <div className="container mx-auto p-4">

    <form action={formAction}>
      ...the rest of the inputs
      <DropdownList
        options={barangay}
        value={formValue.barangay} 
        selected={selectedBarangay} 
        onSelect={handleBarangaySelection}
        required={true}
        placeholder="Please select an option"
        name="barangay"
      />
      <SubmitButton />
    </form>
    </div>
  );
}