I have this on the server component

export default async function addWaterStation(formData: FormData): Promise<{ message: string }> {
  //supabase here
    try{
        const station_name = formData.get('name')
        const user_id = user?.id
        const address = formData.get('address')
        const barangay = formData.get('barangay')
        const delivery_mode = formData.get("delivery_mode")
        const contact_no = formData.get("delivery_mode")
        const tel_no = formData.get("tel_no")
        const remarks = formData.get("remarks")
        const created_at = new Date()
        
        console.log(delivery_mode,"created at")
        const {data, error} = await supabase.from('water_refilling_station')
            .insert({
                created_at,
                user_id,
                station_name,
                address,
                barangay,
                remarks,
                contact_no,
                tel_no,
                // delivery_mode,
            }).select()
        
        if(error){
            console.log(error, "error in the ts")
            return {message: `${error.message}  - unable to save`}
        } 

        revalidatePath('/water_station')
        return{message: 'success'}

    }catch(e){
        return {message: "Failed to submit the form."}
    }

}

And calling it like this on the client:

export default function WaterStationProfileForm() {
  const [message, setMessage] = useState<string>('');
  const [formData, setFormData] = useState<FormData>({
  ..
  });

  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault(); // Prevent the default form submission behavior

    // Combine buildingNumber, street, zone, and landmark to create the address
    const address = `${formData.buildingNumber}, ${formData.street}, ${formData.zone}, ${formData.landmark}`;

    const res = await addWaterStation(new FormData(event.currentTarget))
    setMessage(res.message);

  }