如何在函数式React组件中使用动态JS库(wavesurfer.js)？

import WaveSurfer from 'wavesurfer.js';

const [waveSurfer, setWaveSurfer] = useState(null);

useEffect(() => {
  const wavesurferInstance = WaveSurfer.create({
    container: '#waveform', // 指定波形图的容器元素
    waveColor: 'violet', // 波形图颜色
    progressColor: 'purple', // 进度条颜色
    // 其他配置项...
  });

  setWaveSurfer(wavesurferInstance);

  return () => {
    // 在组件卸载时销毁wavesurfer实例
    wavesurferInstance.destroy();
  };
}, []);

const playAudio = () => {
  waveSurfer.play();
};

const pauseAudio = () => {
  waveSurfer.pause();
};

// 其他操作方法...

<div id="waveform"></div>