audio tag auto-play not working

I have a webRTC voice calling application using javascript.

Whenever it receives a stream , it will dynamically create a audio tag and add stream to its srcObject then play it.

While trying to play it, it throws following error

The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission

Following is the source code:

      const audioElement = document.createElement("audio");
      audioElement.srcObject = stream;
      audioElement.id = socketid;
      audioElement.key = socketid;
      audioElement.muted = false;
      audioElement.autoplay = true;
      audioElement.playsInline = true;


      // Append the audio element to the parent div
      allAudioStreamBlockRef.current.appendChild(audioElement);
      audioElement.play().catch((error) => {
        
          window.alert("Audio playback error: " + error.message);
                 
      });

Based on research, i found that it was because of auto-play blocking policy

So i have added a button and tried to play it again

audioElementsRef.current.forEach((audioElement) => {
        audioElement.muted = false;
        audioElement.play().catch((error) => {
         
          console.log(
            `[INFO][CLIENT] Again getting error while playing: ${error.message}`
          );
        });
      });

But still getting same error. it is not able to play the audio even after getting user interaction (play using a button click)

audio is playing in iPadOS v15.7.8 safari Also tested in iphone (IOS v16.1, v16.1.1) everything was working

Issue occurred in iPadOS 16.2 safari browser only.

How to fix this ? what went wrong ?