How to remove geojson component from mapcontainer

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>
      );
};

Hi, I want to add a select dropdown to the map function such that, when its value changes, the MyData component layer is deleted/removed and a new layer is rendered in its place. Is that possible?

Sandbox of above code