How do I have to rewrite Hook Calls for React?

I have a problem with getting the right syntax. I am working on a Next.js-project, and I am trying to transfer the standard JavaScript-syntax into the syntax of React.

I am developing a web-app with a leaflet-map. My goal is it to display a GeoJson which consists of different tiles. Each tile should be clickable. So far I managed to get the tiles to highlight, when hovering with the cursor. My code to click on a tile and at the same time zoom to it looks like this:

const onEachFeature = (feature, layer) => {

layer.on({
  mouseover: highlightFeature,
  mouseout: resetHighlight,
  click: zoomToFeature,
});
};
// ----------------------------------------------------
    
// highlightFeature function---------------------------
  function highlightFeature(e) {
    var layer = e.target;
    layer.setStyle(stylelayer.highlight);
  }
// ----------------------------------------------------

// resetHighlight function-----------------------------
  function resetHighlight(e) {
    var layer = e.target;
    var feature = e.target.feature;
    if (checkExistsLayers(feature)) {
      setStyleLayer(layer, stylelayer.highlight);
    } else {
      setStyleLayer(layer, stylelayer.standard);
    }
  }
// ----------------------------------------------------

// checkExistsLayers function--------------------------
  function checkExistsLayers(feature) {
    // console.log('featuresSelected', feature.properties.main_id);
    var result = false;
    for (var i = 0; i < featuresSelected.length; i++) {
      if (featuresSelected[i].main_id == feature.properties.main_id) {
        result = true;
        break;
      }
    }
    return result;
  }
// ----------------------------------------------------

// setStyleLayer function--------------------------
  function setStyleLayer(layer, styleSelected) {
    layer.setStyle(styleSelected);
  }
// ----------------------------------------------------
  var arrayBounds = [];
  var featuresSelected = [];

// zoomToFeature function--------------------------
  function zoomToFeature(e) {
    var layer = e.target;
    var feature = e.target.feature;
    var map = useMap();
    if (checkExistsLayers(feature)) {
      removelayers(feature, setStyleLayer, layer, stylelayer.standard);
      removeBounds(layer);
    } else {
      addLayers(feature, setStyleLayer, layer, stylelayer.highlight);
      addBounds(layer);
    }
    map.fitBounds(arrayBounds);
    detailsselected.update(featuresSelected);
  }
// ----------------------------------------------------

// addLayers function--------------------------
  function addLayers(feature, callback) {
    featuresSelected.push({
      main_id: feature.properties.main_id,
      feature: feature,
    });
    callback(arguments[2], arguments[3]);
  }
// ----------------------------------------------------

// addBounds function--------------------------
  function addBounds(layer) {
    arrayBounds.push(layer.getBounds());
  }
// ---------------------------------------------------- 

// removelayers function--------------------------
  function removelayers(feature, callback) {
    featuresSelected = featuresSelected.filter(
      (obj) => obj.main_id != feature.properties.main_id
    );
    callback(arguments[2], arguments[3]);
  }
// ----------------------------------------------------


// removeBounds function--------------------------
  function removeBounds(layer) {
    arrayBounds = arrayBounds.filter((bounds) => bounds != layer.getBounds());
  }
// ----------------------------------------------------

Now I do get the following error:

Does anybody know how to rewrite my code in order to work for react? I would be very thankful for any help :)