Остановить выполнение requestAnimationFrame в React

Пишу на React визуализатор звука с применением методов Web Audio API

В целом все работает отлично кроме requestAnimationFrame, данная функция уходит в бесконечный цикл который не получается остановить с помощью вызова cancelAnimationFrame

Я перепробовал уже с 10ток разлиных вариантов и так и не получил нужного результата

import React, { useEffect, useState } from 'react';

import "./equalizer.css"

// Обходим баг в хроме и сафари
const AudioContext = window.AudioContext || window.webkitAudioContext

function Equalizer({ audio, playPauseSwitch }) {

   useEffect(() => {

      // Переменные анализатора звука
      let context, analyser, audioNode, arrayVolums

      function getAnalaizerAudio() {
         // Проверка ошибки при оздании обьекта audio
         if (audio !== undefined) {

            // убираем политику CORS
            audio.crossOrigin = "anonymous"

            // Создаем аудио контекст
            context = new AudioContext();

            // Создаем функцию для получения частоты
            analyser = context.createAnalyser()

            // Задаем усреднение волны
            analyser.smoothingTimeConstant = 0.3;

            // Задаем количество блоков с частотой - 64
            analyser.fftSize = 128;

            // Создаем аудио узел
            audioNode = context.createMediaElementSource(audio);

            // Подключаем его к анализатору частот
            audioNode.connect(analyser)

            // вывод звука на колонки
            analyser.connect(context.destination);

            getVolumeEqualizer()

         }
      }

      // Управление requestAnimationFrame для getVolumeEqualize
      let animationFrameSwitch

      // Функция для визаулизации частоты
      function getVolumeEqualizer() {

         animationFrameSwitch = undefined

         // Формируем бинарный массив и заполняем его данными частоты
         arrayVolums = new Uint8Array(analyser.frequencyBinCount)
         analyser.getByteFrequencyData(arrayVolums)

         start()
      }

      function start() {
         if (playPauseSwitch === true) {
            animationFrameSwitch = window.requestAnimationFrame(getVolumeEqualizer)
         }
      }

      function stop() {
         if (playPauseSwitch === false) {
            window.cancelAnimationFrame(animationFrameSwitch)
            return animationFrameSwitch = undefined
         }
      }

      stop()

      getAnalaizerAudio()

   }, [audio])

   return (
      <div>
         <div className="equalizer__wraper">
            </div>
         </div>
      </div >
   );
}

export default Equalizer;