useSound в react, проблема автоплея

Я стримлю данные по вебсокету, и при определенном условии мне нужно воспроизвести уведомление (использую библиотеку useSound), но есть проблема, иногда звук не проигрывается, вот что выводится в консоли:

Вот мой код компонента:

const NotificationSocket = ({ notification }: INotificationSocket) => {


const [active, setActive] = useState<boolean>(false);
  const [play] = useSound(sound);

  const { data = [] } = useGetUpdatedKlinesQuery({
    symbol: notification.coin,
    interval: TransformDistance(notification.timeframe),
    type: notification.typeCoin,
  });

  useEffect(() => {
    if (active) {
      return;
    }
    const high = Number(data[2]);
    const low = Number(data[3]);
    if (high > notification.price && notification.price > low) {
      play();
      setActive(true);
    }
  }, [data]);

  return (
    <>
      {active ? (
        <div className={styles.wrap}>
          <div>
            <AccessAlarmIcon />
          </div>
          <div className={styles.info}>
            <HeaderNotification notification={notification} setActive={setActive} />
            <Info notification={notification} />
            <FooterNotification />
          </div>
        </div>
      ) : null}
    </>
  );
};

Подскажите, пожалуйста, как это исправить?