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}
    />

Start from the provided React Plot component, especially the scattergl data, onSelected handler, selection arrays, fetchMore updates, and dataRevision/revision props. Reproduce selection after adding batches of 1,000 points and inspect whether selected-point counts and plotted coordinates remain consistent; done means all selected points are retained and the original plot does not change unexpectedly.