Как перерисовать ломаную линию при смене реквизита в реактивном листочке?

Question

При использовании react-laflet 2.3.0 отображается карта, а полилинии рисуются в соответствии с данными координат, полученными с помощью реквизита.

При повторном переключении полилинии открывается всплывающее окно (MUICard) и отображаются данные с помощью вызова REST в componentDidMount из MUICard. Пока все хорошо.

Всякий раз, когда измененный реквизит получен компонентом карты, полилинии добавляются или удаляются, и некоторые из них остаются в зависимости от полученных данных.

На этих старых полилиниях открывается событие onmouseoverвсплывающее окно с устаревшими данными . Нет запроса, который можно увидеть в окне отладки браузера. Это вызвано pass by reference JavaScript или кэшированием браузером?

Ниже приведен код метода рендеринга компонента карты.

 render() {

    const lineData = this.props.data; 

    return (
    <div id="map">
      <Map
          style={{ height: "80vh", width: '100%'}}
          center={position}
          zoom={this.props.zoom}
          ref='mapRef'
        >
      <TileLayer
            url="https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}{r}.png"
            attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>' 

      />
      {
        lineData.map((line, index) => {
        return <Polyline key={index} positions={[
        [line.fromY, line.fromX], [line.toY, line.toX],
        ]} weight={'0.80'} color={'red'}
        onMouseOver={e => e.target.openPopup()}       
      >
        <Popup >                
          <MUICard poiId={line.poi_id} />                
        </Popup>
      </Polyline>
      })
    }
      </Map>
    </div>
    );
  }

Как обеспечить завершение события onmouseover для каждой полилиниис вызовом REST, приводящим к появлению свежих данных во всплывающем окне? или, проще говоря, как рендерить полилинию при каждом изменении реквизита?