leaflet - 如何从 mapcontainer 中删除 geojson 组件

Question

const MyData = () => {
// create state variable to hold data when it is fetched

    const [data, setData] = React.useState();

    // useEffect to fetch data on mount
    useEffect(() => {
   // async function!
      const getData = async () => {
      // 'await' the data
          const response = await axios.get("url");
          // save data to state
          setData(response.data);
      };
    getData();
    }, []);

    // render react-leaflet GeoJSON when the data is ready
    if (data) {
       return <GeoJSON data={data} />;
    } else {
      return null;
  }
};


// Use your component in a MapContainer
const Map = (props) => {
      return (
        <MapContainer {...mapcontainerprops}>
        <MyData />
        </MapContainer>
      );
};

嗨，我想在 map 函数中添加一个选择下拉菜单，这样，当它的值发生变化时，MyData 组件层会被删除/移除，并在其位置呈现一个新层。那可能吗？

上述代码的沙箱