Create a ref as an initial value with array.

const urlsRef = useRef([]);

Then in the useEffect try to initialize the array length with urls length.

 useEffect(() => {
   urlsRef.current = urlsRef.current.slice(0, urls.length);
}, [urls]);

Then in the ref attribute push inside urlsRef

return <div>
    <div >{'Audios'}</div>
    {urls.map(url => <div >
        <audio controls src={url} ref={el => urlsRef.current[i] = el}  />
    </div>)}
</div>;

Depending on performance concerns if your lists are very large, you could use an id on the element and a DOM query to select it. Personally I would prefer to have a more specific ID, than an array index, incase of edge cases like reordering the list. Usually it's best to reference something that is in the data.

So if we have a list of URLs (['google.com', 'amazon.com', 'microsoft.com']), then we can update that to store an id as well. This should be done when you go to store the data, not in the render of a React Component.

urls: [{url: 'google.com', id: 1}, {url: 'amazon.com', id: 2}, {url: 'microsoft.com', id: 3}]

Now ideally you would have something like uuid() or a helper that uses a timestamp or something better than this example when generating an ID, but it is an example :)

With this in mind let's render things a little differently.

return (
  <div>
    <div>Audios</div>
    {urls.map(({url, id}) => (
      <div>
        <audio controls src={url} id={`audio-${id}`} />
      </div>
    ))}
  </div>
);

if you ever need to access one of these elements, lets say on a user click: onClick={handleClick(id)}

handleClick = (id) => (e) => {
  const elem = document.getElementById(`audio-${id}`)
  // do something with the audio element
}