Получение значения textarea в nextjs

Я пытаюсь получить данные из текстовой области в функциональном компоненте реакции, я использую хук Reducer для извлечения данных из формы, я использую редуктор для получения данных из dom. Я не понимаю, что я сделал неправильно, помощь была бы очень оценил.

import Success from "../../components/singleElements/Success"
import Error from "../../components/singleElements/Error"
import { useQueryClient, useMutation } from "react-query"
import { addOnePub, getPub } from "../../lib/helper"
import { useReducer } from "react"

export default function Insertpub(){
//I use this reducer  to fetch the data
  const formReducer = (state, event) => {
    return {
      ...state,
      [event.target.name]: event.target.value,
    };
  };
//then  get the textfield changes from here
  const [formData, setFormData] = useReducer(formReducer, {});
  
    const queryClient = useQueryClient()
    const addMutation = useMutation(addOnePub, {
        onSuccess : () => {
            queryClient.prefetchQuery('pub', getPub)
        }
    })

    const handleSubmit = (e) => {
      
        e.preventDefault();
        
        if (Object.keys(formData).length == 0) return console.info("Don't have Form Data");

        let {pub} = formData;
        const model = {
            pub
        }

        addMutation.mutate(model)
        console.info("the data is correctly inserted")
    }

    if (addMutation.isLoading) return <div>Loading!</div>
    if (addMutation.isError) return <Error message = {addMutation.error.message}></Error>
    if (addMutation.isSuccess) return <Success message = {"Added Successfully"}></Success>

// Когда я вставляю значение в эту текстовую область, он возвращает нулевой объект

    return (
        <form  onSubmit = {handleSubmit}>
            <textarea
              className = "bg-gray-200 w-full rounded-lg shadow border p-2"
              rows = "5"
              placeholder = "Ecrivez votre publication ici"
              OnChange = {setFormData}
              name = "pub"
              id = "pub"
             
            ></textarea>

            <div className = "w-full flex flex-row flex-wrap mt-3">
              
              <div className = "w-2/3">
                <button
                  type = "submit"
                  className = "float-right bg-indigo-400 hover:bg-indigo-300 text-white p-2 rounded-lg"
                >
                  Publier
                </button>
              </div>
            </div>
          </form>
    )
}

Обычно, когда я отправляю форму, она должна возвращать значение, заполненное хуком редуктора, но я получил что-нибудь