When I render a 150k points its really slow

plotly.js
1

Hey everyone, I was trying to make a 3d graph that render every 50miliseconds a 150k point, the idea is to make a 50fps frame by frame graph that change every 50ms.

to test if the trace would render fast I tried to get a random point with interval that happens every 50ms.
I use react and this what I wrote.

	useEffect(() => {
		const interval = setInterval(() => {
			const randomTraces: Plotly.Data[] = Array(30)
				.fill(0)
				.map((_, i) => {
					const { index, arr } = randomValues(5000, 30);
					return {
						x: Array(5000).fill(i),
						y: index,
						z: arr,
						type: 'scatter3d',
						mode: 'markers',
					};
				});

			setCount((oldCount) => oldCount + 1);
			setTraces(randomTraces);
		}, 50);
		return () => clearInterval(interval);
	}, []);

and this is how I render the Plot:

<Plot
   					data={traces}
   					layout={{ ...layout, scene: { ...scene } }}
   					onRelayout={(relayout: any) => { handleRelayout(relayout['scene.camera']); }}
   				/>

is there any way that I can render this amount of dots every 50ms without any big decrease in performance.