Control (Add and remove) <FeatureLayer> on Checkbox OnChange about react-esri-leaflet HOT 5 CLOSED

import React, { useEffect } from "react";
import L  from "leaflet";
import 'leaflet/dist/leaflet.css';
import { MapContainer, TileLayer, GeoJSON, useMap} from "react-leaflet";
import axios from "axios";
import {  FeatureLayer } from "react-esri-leaflet";


const MyData = () => {
  const [data, setData] = React.useState();
  const map = useMap();

  useEffect(() => {
    const getData = async () => {
      const response = await axios.get(
        "https://gist.githubusercontent.com/UmairMughal901/486a7f64d1325ea8cb0c4f91925c5d85/raw/521f91aedb0b08b02ab7746e332041e31dc72360/map.geojson"
      );
      setData(response.data);
    };
    getData();
  }, []);

  if (data) {
    // These next 3 lines purely for debuggins:
    const geojsonObject = L.geoJSON(data);
    //map.fitBounds(geojsonObject.getBounds());
    //console.log(geojsonObject);
    // end debugging

    return <GeoJSON data={data} />;
  } else {
    return null;
  }
};

const Map = (props) => {
  return (
    <MapContainer
      doubleClickZoom={true}
      id="mapId"
      zoom={5}
      center={[32, 71]}


    >
      <MyData />

      
      <FeatureLayer url={'http://202.166.167.121:6080/arcgis/rest/services/Punjab/PB_irisportal_pg31_v_02112017/MapServer/12'}  
      eventHandlers={{
        load: () => console.log('featurelayer loaded')
      }}
      />
    
 

      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        maxZoom='13'
      />


    </MapContainer>
  );
};

export default Map;