Plotly.react leaves duplicate clippaths

const container = document.createElement('div');
document.body.appendChild(container);
await Plotly.newPlot(container, [], { title: 'abc' });
await Plotly.react(container, [], { title: 'hello' });

The resulting DOM contains multiple copies of the same clippath:

<clippath class="plotclip" id="clipc001dfxyplot">
  <rect height="270" width="540" />
</clippath>
...
<clippath class="plotclip" id="clipc001dfxyplot">
  <rect height="270" width="540" />
</clippath>

This is causing issues for our accessibility tests, which check that IDs are unique within the document, but in some cases the newer clippath is different (but still shares the same ID), so presumably the items which reference it could pick up an old value and therefore render incorrectly after an update.

(using Plotly 2.24.3)

Start with the minimal reproduction in the issue, compare the DOM after Plotly.newPlot and Plotly.react, and trace where the plotclip clippaths are created or retained. Done means the updated plot has no duplicate clippath IDs and elements reference the intended clippath after the update.