wavesurfer not displaying waveform - reactjs

Question

I'm trying to use wavesurfer.js to display a waveform for audio files in a chat app i'm building using react . The audio plays fine but the wave is not displayed.
How do i display the waveform?
export const Wave = ({ url }) => {
const [isPlaying, setIsPlaying] = useState(false);
const waveformRef = useRef(null);
const trackRef = useRef(null);
useEffect(() => {
waveformRef.current = WaveSurfer.create({
container: "#waveform",
waveColor: "#FDCCE3",
progressColor: "#FA67AB",
backend: "MediaElement",
height: 80,
normalize: true,
responsive: true,
cursorColor: "transparent"
});
waveformRef.current.on("finish", () => {
setIsPlaying(false);
});
waveformRef.current.load(trackRef.current);
}, [url]);
const handlePlay = () => {
setIsPlaying(!isPlaying);
waveformRef.current.playPause();
};
return (
<div className="flex items-center h-24 bg-transparent gap-8">
<button
className="border-none outline-none cursor-pointer"
onClick={handlePlay}
>
<div className="bg-[#FA67AB] rounded-full p-2">
{!isPlaying ? (
<PlayArrowIcon htmlColor="white" />
) : (
<PauseIcon htmlColor="white" />
)}
</div>
</button>
<div ref={waveformRef} id="waveform"></div>
<audio id="track" src={url} ref={trackRef} />
</div>
);
};