title: How do I remove multiple setIntervals from useEffect
body: <p>I'm loading multiple animals into my ThreeJS project. All these animals have PositionalAudio with a setInterval function. I use them inside a useEffect function. On the callback I want to clear the interval, but it keeps calling the function.</p>
  <p>This is the function where I set my setInterval:</p>
  <pre><code>const loadAudio = () =&gt; { 
    const animalSound = new THREE.PositionalAudio(listener);
    animalSound.setBuffer(animalBuffer);
    playSounds = setInterval(() =&gt; {
      animalSound.play();   
    } , 5000);
    audios.push(animalSound);
  }
  </code></pre>
  <p>In the return function I try to clear the interval:</p>
  <pre><code>return () =&gt; {
    audios.forEach((audio) =&gt; {
      audio.stop();
      clearInterval(playSounds);
    });
  };
  </code></pre>
  <p>Sadly the audio keeps playing every 5 seconds</p>
  <p>Here is a code snippet</p>
  <p><a href="https://codesandbox.io/s/bitter-tree-bb4ld?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/bitter-tree-bb4ld?file=/src/App.js</a></p>