I have a react app and in that there's a component called AudioComponent. I want to play an audio when that component loads. My code for the AudioComponent is as follow.

import mp3 from './Hymn.mp3'
    
function AudioComponent() {

     const audio = new Audio(mp3)

     useEffect(() => {
        audio.play()
      }, [])
      
        return (
          <div className="pp">
            
      This is the Audio component

    <div >

    </div>
 
          </div>
        );
      }
      
      export default AudioComponent;

when running the app the following error shows in the console.

AudioComponent.jsx:41 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

I want to play the audio when ever the audio component is used without any user interactions. what might be the issue?