I am building a normal app that have 2 button, each will play 1 WAV audio file when clicked.

Here's the code :

import React from "react";
function Test() {
  const play = (note) => {
    new Audio(document.getElementById(note).src).play();
  };
  return (
    <>
      <div>TEST</div>
      <button onClick={() => play("C5")}>Play C5</button>
      <button onClick={() => play("C#5")}>Play C5 sharps</button>
      <audio id="C5" src="./audio/C5.wav" />
      <audio id="C#5" src="./audio/C#5.wav" />
    </>
  );
}

export default Test;

The C5 file play normal. But React can't seem to play the C#5 file and I get this error:

index.js:1 Uncaught Error: The error you provided does not contain a stack trace.
    at L (index.js:1)
    at Y (index.js:1)
    at index.js:1
    at index.js:1
    at l (index.js:1)
L @ index.js:1
Y @ index.js:1
(anonymous) @ index.js:1
(anonymous) @ index.js:1
l @ index.js:1
localhost/:1 Uncaught (in promise) DOMException: Failed to load because no supported source was found.

Is it because of the # in the file path ? How can I fix this without changing the file name ?

All the audio files are put in public folder if that help. Please help me in this. Thank a lot.