設定した位置からブラウザを開いているデバイスがどれだけ離れたかを計測したい。

例えばですが、

1. A地点に立っている状態で、基準地点設定ボタンを押す
2. A地点から離れる
3. A地点から離れた距離（長さ）をブラウザにリアルタイムで表示する
```上記のような機能を実装したいのですが、実装方法や実装しやすくなるプラグインやツールなどを教えていただけないでしょうか。
そのほかアイデアや案など何かご助言をいただけますと幸いです。
具体性が低い質問で恐れ入りますが、よろしくお願いいたします。

試したこと
---
[Geolocation API](https://developer.mozilla.org/ja/docs/Web/API/Geolocation/Using_geolocation)で位置情報を取得し続けることで距離（長さ）が測れるかと思い、ひとまず位置情報を取得してみました。
![イメージ説明](df9c4633d83719cb09b1c5c87f132025.jpeg)
[サンプル](https://codesandbox.io/s/determined-leaf-hnp9g?fontsize=14&hidenavigation=1&theme=dark)

しかし、環境によるところではありますが、位置情報の取得に大変時間が掛かります。
また、緯度と経度が取得できても位置情報取得回数のカウントが増えなかったり、逆のことがあったりと動作が不安定でした。

リアルタイムにヌルヌルと位置情報を取得し続けることができれば、（具体的な方法は分かっていませんが）距離（長さ）を算出するのに有効かと思いますが、上記のような不安定な動作ですと実用に耐えないパフォーマンス性です。

サンプルのソースコード
---
React.jsを使用しています。
```jsx
function App() {
  const [baseLatitude, setBaseLatitude] = useState(0);
  const [baseLongitude, setBaseLongitude] = useState(0);
  const [latitude, setLatitude] = useState(0);
  const [longitude, setLongitude] = useState(0);
  const [count, setCount] = useState(0);
  let watchId;

  const setPos = () => {
    navigator.geolocation.getCurrentPosition(pos => {
      setBaseLatitude(pos.coords.latitude);
      setBaseLongitude(pos.coords.longitude);
    });
    watchId = navigator.geolocation.watchPosition(pos => {
      setLatitude(pos.coords.latitude);
      setLongitude(pos.coords.longitude);
      setCount(count + 1);
    });
    console.log(count);
  };

  const reset = () => {
    setBaseLatitude(0);
    setBaseLongitude(0);
    setLatitude(0);
    setLongitude(0);
    setCount(0);
    navigator.geolocation.clearWatch(watchId);
  };

  return (
    <>
      <button onClick={setPos}>基準地点設定</button>
      <p>基準緯度 {baseLatitude}</p>
      <p>基準経度 {baseLongitude}</p>
      <hr />
      <p>現在緯度 {latitude}</p>
      <p>現在経度 {longitude}</p>
      <p>位置情報取得回数 {count}</p>
      <button onClick={reset}>リセット</button>
    </>
  );
}