Error 400: "The field is required" when I tried to consume a put method in React

I don't see what's failing in the code; I want to consume a Put method, but when I do, the response returned by the API is:

"errors": {
    "$": [
        "The JSON value could not be converted to MTE.API.Request.Supplier.PutSupplierRequest. Path: $ | LineNumber: 0 | BytePositionInLine: 2."
    ],
    "request": [
        "The request field is required."
    ]
}

What I'm trying to achieve is that, visualizing a series of data in a table, I can edit the information from a modal. I think the problem is precisely there, but I have no idea why. The other methods works well (get, post and delete).

I structured the request like this:
For more context: I have a const to define the url: http://api.com/api/suplier

 actualizarProveedor: async (proveedorData) => {
    try {
      const response = await axios.put(`${API_BASE_URL}`, proveedorData, {
        headers: {
          'Content-Type': 'application/json',
        },
      });
  
      console.log('Actualizar Proveedor:', response.data);
      return response.data;
    } catch (error) {
      console.error('Error en actualizarProveedor:', error);
      throw error;
    }
  },

And this is how the data is sent to the request:

const handleGuardarEdicion = async (editedProveedor) => {
    try {
      await apiCompras.actualizarProveedor(editedProveedor.id, {
        id: editedProveedor.id,
        name: editedProveedor.nombre,
        ruccode: editedProveedor.numeroRUC,
      });
  
      console.log('Proveedor actualizado exitosamente:', editedProveedor);
  
      cargarProveedores();
    } catch (error) {
      console.error('Error al actualizar proveedor:', error);
    }
  };

Finally, this is how the modal is constructed:

<Dialog open={modalOpen} onClose={handleCloseModal}>
  <DialogTitle>Editar Proveedor</DialogTitle>
  <DialogContent>
    <form>
      <TextField
        label="Nombre"
        variant="outlined"
        margin="normal"
        fullWidth
        required
        value={selectedProveedor ? selectedProveedor.name : ''}
        onChange={(e) => handleEditFieldChange('name', e.target.value)}
      />
      <TextField
        label="Código RUC"
        variant="outlined"
        margin="normal"
        fullWidth
        required
        value={selectedProveedor ? selectedProveedor.ruccode : ''}
        onChange={(e) => handleEditFieldChange('ruccode', e.target.value)}
      />
    </form>
  </DialogContent>
  <DialogActions>
    <Button onClick={() => { handleGuardarEdicion(selectedProveedor); handleCloseModal(); }} color="primary">
      Cerrar
    </Button>
  </DialogActions>
</Dialog>

I've made changes that have altered the error message to this:

"errors": {
    "Id": [
        "The field Id must be between 1 and 2147483647."
    ],
    "Name": [
        "The Name field is required."
    ],
    "RUCCODE": [
        "The RUCCODE field is required."
    ]
}

Adding this to the request:

try {
  const requestData = {
    request: {
      id: supplierData.id,
      name: supplierData.name,
      ruccode: supplierData.ruccode,
    }
  };

You're sending two arguments to actualizarProveedor() yet its signature only accepts one. I assume the object in the second argument is the data you're intending to send, so it's being ignored.

To fix the issue you can amend the invocation to pass the object only:

await apiCompras.actualizarProveedor({
  id: editedProveedor.id,
  name: editedProveedor.nombre,
  ruccode: editedProveedor.numeroRUC,
});