We decided to use wavesurferJS in our React project. I have multiple audio files. How do I make the others stop when I play one of them? We tried almost all the solutions over the web. Nothing helped. Any help is appreciated.

import React, { useRef, useEffect, useState } from "react";
import WaveSurfer from "wavesurfer.js";

const VoiceItem= ({url }) => {
  const waveformRef = useRef();
  const [wavesurfer, setWavesurfer] = useState(null);

  useEffect(() => {
    if (waveformRef.current) {
      const wave = WaveSurfer.create({
        container: waveformRef.current,
      });
      wave.load(url);
      setWavesurfer(wave);
    }
  }, []);

  const togglePlayPause = () => {
    wavesurfer.playPause();
  };

  return (
    <div>
        <button onClick={togglePlayPause}>
        </button>
        <div ref={waveformRef}></div>
    </div>
  );
};

export default VoiceItem;