422 Error with XMLhttprequest

I am trying to use XML to get and update information from my Airtable. I am doing the following for POST to update a value but I keep getting error 422. I am doing a very similar process for GET and it works, but not for POST.

function httpPost(BaseID,tablename, APIKey){
    var xmlHttp = new XMLHttpRequest();
    var url = "https://api.airtable.com/v0/" + BaseID + "/" + tablename +"/";
    var propValue = {
        "id": "recIYykIMqJGcvNNi",
        "fields": {
          "Variables": "Test 1",
          "Value": "136"
        }
      }
  
xmlHttp.open('POST', url, false);
xmlHttp.setRequestHeader('Content-type','application/json');
xmlHttp.setRequestHeader('Authorization',"Bearer " + APIKey);

xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        console.log(xmlHttp.responseText);
    }
console.log(xmlHttp.status)
};
xmlHttp.send(JSON.stringify(propValue));

}