How to make WFS layer editable on leaflet map and editing will reflect on geoserver?

Question

code to call WFS layer from geoserver and add on leaflet map. I want to make it editable and change will reflect on WFS layer present on geoserver. I have spend more than 4 hours trying to figure out how I can do this. I use Leaflet and Leaflet Draw in order to draw news features on my map.

Now I want to be able to edit features of an existing WFS layer (coming from geoserver).

I have searched a lot all around internet and I can not find a clear example of how to make my WFS layer editable.

    var map = L.map('map', {editable: true}).setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
map.addControl(drawControl);
var owsrootUrl = 'http://localhost:8088/geoserver/topp/ows';      
 var defaultParameters = {  
      service : 'WFS',  
      version : '1.0.0',  
      request : 'GetFeature',  
      typeName : 'topp:states',  
      maxFeatures: '50',  
      outputFormat : 'application/json', 
      editable : 'true',
      //cql_filter : "INTERSECTS(the_geom, querySingle('restricted', 'the_geom','cat = 3'))"     
      cql_filter : "PERSONS > 15000000 AND STATE_NAME = 'Texas'"
 };  
 //parameters are defined 
 var parameters = L.Util.extend(defaultParameters);  
  var URL = owsrootUrl + L.Util.getParamString(parameters);  
  var x 
  var response2 = [];
  var WFSLayer=null; 
  var selectedFeature = null;
  var ajax = $.ajax({  
      url : URL,  
      async: false, 
      jsonp: false, 
      jsonpCallback: 'getJson', 
      datatype: 'json',   
      success : function (response) {  
          response2.push(response);
          console.log("response", response)
      WFSLayer = L.geoJson(response, { 
              style: function (feature) {  
                  return {  
                      weight: 4, 
                      color: "red", 
                      opacity: 1, 
                      fillColor: "red", 
                      fillOpacity: 0.5  
                  };  
              }, 
 }).addTo(map)              
     }   
 }); 

//i want to make it editable.