Wavesurfer.js regions not console logging in react. Need direction

Question

So I have managed to make a wavesurfer 'wave' so to speak. I can get it to play. I even managed to add regions. But for some reason it just isn't doing anything when it enters or exits a region. In the code below I have it set to console logging the region start and end.

Also, as im populating a url off a click somewhere else, and using the context api to bring it in, unless i do playerAsset?.audioUrl || 'www.google.com , the player throws an error saying the url isnt there. I would prefer not to have to add the || 'fake url' after the actual url variable.

import React, { useEffect, useRef, useState } from 'react';
import WaveSurfer from 'wavesurfer.js';
import RegionsPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.regions';
import VolumeUpIcon from '@mui/icons-material/VolumeUp';
import PlayArrowIcon from '@mui/icons-material/PlayArrow';
import PauseIcon from '@mui/icons-material/Pause';
import SkipNextIcon from '@mui/icons-material/SkipNext';
import Grid from '@mui/material/Grid';
import useAssetPlayer from 'hooks/asset-player.hooks';

WaveSurfer.regions = RegionsPlugin;

const formWaveSurferOptions = ref => ({
  container: ref,
  waveColor: 'white',
  progressColor: 'grey',
  cursorColor: 'white',
  responsive: true,
  height: 100,
  normalize: true,
  partialRender: true,
  hideScrollbar:true,
  plugins: [
    WaveSurfer.regions.create({
      regionsMinLength: 2,
      regions: [
        {
          start: 1,
          end: 3,
          loop: false,
          color: 'hsla(0, 100%, 50%, 0.3)'
        }, {
          start: 5,
          end: 7,
          loop: false,
          color: 'hsla(0, 100%, 50%, 0.3)',
          minLength: 1,
          maxLength: 5,
        }
      ]
   })
  ]
});

const NewAudioPlayer = ({}) => {

  const waveformRef = useRef(null);
  const wavesurfer = useRef(null);
  const [playing, setPlay] = useState(false);
  const [showPlayer, setShowPlayer] = useState(false);
  const [volume, setVolume] = useState(0.5);

  const { playerAsset, isPlaying } = useAssetPlayer();

  useEffect(() => {
    setPlay(false);
    setShowPlayer(true);

    const options = formWaveSurferOptions(waveformRef.current);
    wavesurfer.current = WaveSurfer.create(options);

    wavesurfer.current.load(playerAsset?.audioUrl || 'www.google.com');

    wavesurfer.current.on('ready', function() {

      wavesurfer.current.play();
      setPlay(true);

      wavesurfer.current.on('region-click', function(region, e) {
        console.log(region.start);
        console.log(region.end);
        e.stopPropagation();
        region.wavesurfer.play(region.start, region.end);
      });

      if (wavesurfer.current) {
        wavesurfer.current.setVolume(volume);
        setVolume(volume);
      }
    });

    return () => wavesurfer.current.destroy();
    }, [playerAsset]);

    const handlePlayPause = () => {
      setPlay(!playing);
      wavesurfer.current.playPause();
    };

    const onVolumeChange = e => {
      const { target } = e;
      const newVolume = +target.value;

      if (newVolume) {
        setVolume(newVolume);
        wavesurfer.current.setVolume(newVolume || 1);
      }
   };

   return (
     <Grid container className={!showPlayer ? 'hideNewPlayer' : 'showNewPlayer'}>
     <Grid item xs={1} style={{display: 'flex', justifyContent: 'end', alignItems: 
     'center'}}>
    {!playing ? <PlayArrowIcon style= 
    {{color:'#ffffff',height:50,width:50,cursor:'pointer'}} onClick={handlePlayPause} /> 
    : <PauseIcon  style={{color:'#ffffff',height:50,width:50, cursor:'pointer'}}  
    onClick={handlePlayPause} />}
    </Grid>
    <Grid item xs={1} style={{display: 'flex', justifyContent: 'center', alignItems: 
    'center'}}>
    <SkipNextIcon style={{color:'#DFE8F7',height:25,width:25}}  />
    </Grid>
    <Grid item xs={9} id="waveform" ref={waveformRef}></Grid>
    <Grid item xs={1} style={{display: 'flex', justifyContent: 'center', alignItems: 
    'center'}}>
    <VolumeUpIcon style={{color:'#DFE8F7',height:30,width:30}} />
    </Grid>
    </Grid>
   );
 };

export default NewAudioPlayer;