I’m using react map gl, i have a map layer.

When i’m updating the geojson the new data do appear on the map, but data that are no longer in the geojson are not disapearing.

I think it is because they have a popup that is still referencing the data even though it doesn’t exist anymore.

How am i supposed to fix this ? delete popup at every update ? is there a popup props to do this ?

Here is the source from my layer

Does the following code have a mistake or does it come from elsewhere ?

<Source
            id="tipi"
            type="geojson"
            data={props.tipigeoJson}
            promoteId="id"
            generateId={true}
            key={JSON.stringify(props.tipigeoJson)} // lign that update layer every time geojson changes
           
          >
            <Layer
              id="tipi"
              type="symbol"
              layout={{
                "icon-image": "Accident_round",
                "icon-size": ["*", 0.05, iconSize],
                
              }}
              
             
            />
          </Source>
  


  {props.tipigeoJson &&
    showPopup &&
    props.tipigeoJson.features.map((feature, index) => {
      
      if (
        feature.properties.score > 3
          &&
          feature.properties.isinfeed === true
      ) {
        return (
          <Popup
            key={index} // Use the index as the key
            longitude={feature.geometry.coordinates[0]}
            latitude={feature.geometry.coordinates[1]}
            offsetTop={[0, -10]}
            closeButton={false}
            closeOnClick={false}
            className="mapboxgl-popup"
          >
          
                <h3>Accident - tipi</h3>
                
          </Popup>
        );
      } else {
        return null; 
      }
    })}