Dynamic points

import React, { useState } from "react";
import "ol/ol.css";
import { Map } from "@react-ol/fiber";
import { useInterval } from "react-use";
import { Fill, Stroke, Style, RegularShape } from "ol/style";

export const stroke = new Stroke({ color: "black", width: 2 });
export const fill = new Fill({ color: "red" });
export const pointStyle = new Style({
  image: new RegularShape({
    fill,
    stroke,
    points: 4,
    radius: 10,
    angle: Math.PI / 4,
  }),
});

export const ExampleDynamicPoints = () => {
  const [location, setLocation] = useState([0, 6000000]);
  useInterval(() => {
    setLocation([100000 * Math.random(), 6000000 + 100000 * Math.random()]);
  }, 1000 / 30);
  return (
    <Map>
      <olView initialCenter={[0, 6000000]} initialZoom={6} />
      <olLayerTile>
        <olSourceOSM />
      </olLayerTile>
      <olLayerVector>
        <olSourceVector>
          <olFeature style={pointStyle}>
            <olGeomPoint coordinates={location} />
          </olFeature>
        </olSourceVector>
      </olLayerVector>
    </Map>
  );
};