Chart type scatter3d make onClick loop when calling history.push inside it

Using Plot inside a Router with type "scatter3d" and trying to use history inside onClick (only if it doesn't unmount the Plot Component) make onClick loop after a first click.

Minimal example:

import Plot from "react-plotly.js";
import { BrowserRouter, Route, useHistory } from "react-router-dom";

function Chart3D() {
    const history = useHistory();

    return (
        <Plot
            onClick={() => {
                console.log("This will be printed a lot");
                history.push("/");
            }}
            data={[
                {
                    x: [1],
                    y: [1],
                    z: [1],
                    type: "scatter3d",
                },
            ]}
        />
    );
}

export default function App() {
    return (
        <BrowserRouter>
            <Route path="/" component={Chart3D} />
        </BrowserRouter>
    );
}

まず、react-plotly.js、BrowserRouter、useHistory、scatter3d Plot、そして onClick 内の history.push を使った最小限の例を再現します。Plot コンポーネントをアンマウントせずに、最初のクリック後に handler が繰り返し実行される理由を追跡します。callback がクリックごとに 1 回実行され、ナビゲーションも引き続き機能すれば完了です。