Empty array sent in request cycle - Inertia with React

I have a form that is supposed to update Category in a table. I am not using the inertia form helper for it because I have a 'create' form for Category model and an 'edit' form for Setting model, that are using the Inertia form helper. When I try to update the model, I get an empty [] array in the request. But the data is captured in the edit form and the fields are filled in as expected.

const submit = () => {
    Inertia.put(route("admin.categories.update", category.id))
}

const [category,  setCategory] = useState({
     id: "",
     category_name: ""
})

<Table>
      {categories.map((category, i) => (
            <tr key={i}>
                <td>{category_name}</td>
                <td>
                     <button onClick={() => setCategory({
                                 id: category.id
                                 category_name: category.category_name
                            })}>
                                     Edit
                      </button>
                  </td>
             </tr>
       ))}
</Table>

The form has the data category_name in the field:

{/* This is the modal having the form*/}
<Modal>

    <Form onSubmit={submit}>
       <Input value="category.category_name" name="category_name" />
    </Form>

</Modal>

When I dd($request->all()) in the backend, I receive an empty array []. I don't know what I'm leaving out.