How do I fix delayed audio when click in NextJs?

I’m working on a Next.js project and encountering an issue with audio playback in my application. I use the following code to play audio when a button is clicked:

export default function Home() {

  function playAudio() {
    const audio = new Audio("/audio/ball_kick.mp3");
    audio.play();
  }

  return (
    <>
      <button onClick={() => playAudio()} />
    </>
  );
}

The problem is that when the button is clicked, there is a slight delay and the audio is not synced with the button action. How can I resolve this issue to ensure that the audio plays without delay and is synchronized with the button click? Are there any approaches or techniques that can be used to make the audio playback more responsive?