I need to run sounds automatically in React. In order to run sounds, I use a non-standard useSound hook. It creates a button and by clicking on this button the sound starts. I made a trigger to automatically start a click and made a delay between sounds.

Sounds come in view of the array. Therefore, I go through the array and create several buttons that should be clicked. Tell me how to create for each button const [play] = useSound("/static/1.mp3"); and your unique id so that all buttons are automatically created and played?

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

import useSound from "use-sound";

export default function Play(props) {

  const arr = ['./1.mp3', '/static/2.mp3', '/static/3.mp3']

  function Button() {
    return props.newResult.map(() => (
      <button className={styles.buttonPlay} id='button3'>
        {props.newResult}
      </button>
    ));
  }

  const Play = () => {
    const [play] = useSound("/static/1.mp3"); // Буква
    return (
      <>
        <button className={styles.buttonPlay} id='button' onClick={play}>
          Пациент
        </button>
      </>
    );
  };

  async function Auto() {
    await new Promise(function (s) {
      setTimeout(s, 1000);
    });
    document.querySelector("#button").click();

    await new Promise(function (s) {
      setTimeout(s, 1000);
    });
  }

  useEffect(() => {
    Auto();
  }, []);

  return (
    <>
      {Play()}
    </>
  );
}