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,
    }
  };