Audio not playing because of "The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page" in console

Question

I want to play sound on socket event. Sometimes it plays sound but sometimes it won't. theres some uncertainty in it !

Below is the code i am using

import React, { useEffect, useState } from "react";
import { useSound } from "use-sound";
import notificationSound from "my_sound.mp3";
import { io } from "socket.io-client";


const Home = ({ children }) => {
  const [play] = useSound(notificationSound, { volume: 0.5 });
  const [playAudio, setPlayAudio] = useState(false);

  useEffect(() => {
    if (playAudio === true) {
      play();
      setPlayAudio(false);
    }
  }, [playAudio]);

useEffect(() => {
      const socket = io("http://localhost:8081", {
        auth: {
          token: localStorage.getItem("user_token"),
        },
      });
      socket.on('play-sound', (data) => {
        setPlayAudio(true);
        toast.success(`New Order ${data.order_id} Received!!`);
      });
}, []);
return (<div> Hello World </div>)
};

module.export = Home;