Cree una ref como un valor inicial con array .

 const urlsRef = useRef([]);

Luego, en useEffect intente inicializar la longitud de la matriz con la longitud de las urls .

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

Luego, en el atributo ref empuje dentro urlsRef

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

Dependiendo de las preocupaciones de rendimiento si sus listas son muy grandes, puede usar una identificación en el elemento y una consulta DOM para seleccionarlo. Personalmente, preferiría tener una identificación más específica que un índice de matriz, en caso de casos extremos como reordenar la lista. Por lo general, es mejor hacer referencia a algo que está en los datos.

Entonces, si tenemos una lista de URL ( ['google.com', 'amazon.com', 'microsoft.com'] ), también podemos actualizarla para almacenar una identificación. Esto debe hacerse cuando vaya a almacenar los datos, no en el renderizado de un componente React.

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

Ahora, idealmente, tendría algo como uuid() o un asistente que use una marca de tiempo o algo mejor que este ejemplo al generar una ID, pero es un ejemplo :)

Con esto en mente, hagamos las cosas un poco diferentes.

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

si alguna vez necesita acceder a uno de estos elementos, digamos en un clic de usuario: onClick={handleClick(id)}

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