react-waves | React component wrapper for wavesurfer.js | Frontend Framework library

import React,{ useEffect, useRef, useState } from "react";
import { useDispatch, useSelector } from 'react-redux'
import { format, formWaveSurferOptions } from '../../utils/generic'
import { receiveCurrentTrack, receiveTrackRef , togglePlay} from '../../redux/action/currentTrack'
import './_playlist.scss'
import WaveSurfer from "wavesurfer.js";
import {Link} from 'react-router-dom';

const PlayList = (props) => {
  const dispatch = useDispatch()

  const { track, queue, currentTrack, index } = props
  const waveformRef = useRef(null);
  const waveRef = useSelector((state)=>state.currentTrack.waveRef)
  const wavesurfer = useRef(null);
  const currentTime = useRef(null)
  const [duration, setDuration] = useState() 

  useEffect(() => {
    
    const options = formWaveSurferOptions(waveformRef.current);
    wavesurfer.current = WaveSurfer.create(options);
    wavesurfer.current.load(track.url);
    
    wavesurfer.current.on("ready", ()=> {
      if(wavesurfer.current){
        wavesurfer.current.setVolume(0)
        setDuration(format(wavesurfer.current.getDuration()))
      }
    });
    
    return () => wavesurfer.current.destroy();
  }, [track.url]);

  useEffect(()=>{
    if(currentTrack){
      dispatch(receiveTrackRef(wavesurfer))
    } 
    return ()=> waveRef?.current.stop()

  },[currentTrack.track?.url])

  const handleClick = () => {
  
    dispatch(receiveTrackRef(wavesurfer))

    if(currentTrack){
      dispatch(togglePlay())
    } 
    else {
      waveRef?.current.stop()
      dispatch(receiveCurrentTrack(track, queue));
    }
  };

  
  
  return (
    
            # {index} :
            {track.title}
            {track.artist}
            0.00 / {duration && duration} 
            console.log('hhh')} ref={waveformRef} />
            {duration && duration}
    
  );
};

export default PlayList;