Multiple issues with Scatter plot - Selection misses points, data changed

We have a Scatter plot, in which we plot points in the range of 1000. Meaning first 1000 points are plotted, then we use Apollo GQL client's fetchmore to get the next 1000, and so on. As we get the new data, we add it to the older data to re-render the plot. We use a box selection to select certain points, there is a selection event handler which then copies references to the selected points into an array, like 'ids'. Now we use these ids to reference the selected points in the original, as in create a new array of just the selected points as an additional range, and provide it to the same plot. However we use a different color, hence giving an illusion of highlighting the selected points.

This issues are:

1. Sometimes Plotly doesn't select all the points, meaning you can check the data.length is lesser even when you select all the points.
2. Sometimes the original plotted points go for a toss, as in the plotting changes after the selection ends. We use React state management, and the data manipulation seems to be alright.

Any idea as to what we may be doing wrong?

// Plotdata is the data to be plotted which is an object with the data as value (array) and we pass the names or x and y arrays to be picked from this object as props
// Plotdata also has ids for the data, which we need to associate with the points
// The second range, with selection[0], selection[1], is again an array with 2 arrays as the selected x and y range, created by onSelect event handler

<Plot
      style={{
        border: '1px transparent',
      }}
      data={[
        {
          x: plotData[x.entity],
          y: plotData[y.entity],
          ids: plotData['ids'],
          name: 'Data',
          type: 'scattergl',
          mode: 'markers+lines',
          marker: {
            color: theme.palette.common.blue,
          },
        },
        // Secoond range, we make this by the ids collected in onSelected
        {
          x: selection[0],
          y: selection[1],
          name: 'Selected',
          type: 'scatter',
          mode: 'markers',
          marker: {
            size: 10,
            color: 'red',
            symbol: 'square-open',
            opacity: 1,
          },
        },
      ]}
      layout={{
        dragmode: 'select',
        height: 550,

        datarevision: dataRevision,
        xaxis: {
          title: {
            text: x.label,
          },
          titlefont: {
            family: 'Raleway',
            size: 13,
          },
          tickfont: {
            size: 11,
            family: 'Raleway',
          },
          linecolor: theme.palette.common.grey,
          linewidth: 1,
          mirror: true,
        },
        yaxis: {
          title: y.label,
          titlefont: {
            family: 'Raleway',
            size: 13,
          },
          size: 16,
          tickfont: {
            size: 11,
            family: 'Raleway',
          },
          tickangle: 270,
          linecolor: theme.palette.common.grey,
          linewidth: 1,
          mirror: true,
          autoMargin: true,
        },
        margin: getMargin(key, matchesXS, matchesMD, matchesLG),
        legend: {
          x: 0.9,
          y: 1.2,
        },
      }}
      config={{
        responsive: true,
      }}
      revision={dataRevision}
      onSelected={onSelect || null}
    />

提供された React Plot コンポーネントから始め、特に scattergl データ、onSelected ハンドラー、選択配列、fetchMore の更新、dataRevision/revision props を確認します。1,000ポイントずつ追加した後に選択を再現し、選択されたポイント数とプロットされた座標が一貫したままかを調べます。すべての選択済みポイントが保持され、元のプロットが予期せず変化しなければ完了です。