React.js – How to access children’s children?

I’m trying to add more nodes to the taskRefContainer. Currently there is only one node and I’m accessing it with children but when I add an extra <div> so I can add an <input type="range" /> to that div the children obviously change. I’ve commented out the part that breaks it in the code below.

import { useState, useEffect, useRef } from "react";
import "./App.css";
import { initialTracks } from "./initialTracks";

function App() {
  const [tracks, setTracks] = useState(initialTracks);
  const [isPlaying, setIsPlaying] = useState(true);
  const tracksContainerRef = useRef();

  useEffect(() => {
    const audioContext = new (window.AudioContext ||
      window.webkitAudioContext)();
    for (const audio of tracksContainerRef.current.children) {
      audioContext
        .createMediaElementSource(audio)
        .connect(audioContext.destination);
    }
    audioContext.resume();
  }, []);
  useEffect(() => {
    for (const audio of tracksContainerRef.current.children) {
      if (isPlaying) {
        audio.pause();
      } else {
        audio.play();
      }
    }
  }, [isPlaying]);
  return (
    <div>
      <h1>Audio Mixer</h1>
      <button onClick={() => setIsPlaying(!isPlaying)}>play</button>
      <div ref={tracksContainerRef}>
        {tracks.map(({ path }, i) => (
          // <div key={i}>
          <audio key={path} src={path} />
          // <input type="range" />
          // </div>
        ))}
      </div>
    </div>
  );
}
export default App;