React Speech Recognition not working when on IP

I have trouble figuring out how to permit browser to use my microphone. I use the

npm-speech-recognition

library. The code i have is as follows:

import React, { useEffect } from "react";
import SpeechRecognition, {
  useSpeechRecognition,
} from "react-speech-recognition";
import styles from "./MicrophoneSpeech.module.css";

const MicrophoneSpeech = () => {
  const {
    transcript,
    listening,
    resetTranscript,
    browserSupportsSpeechRecognition,
  } = useSpeechRecognition();

  if (!browserSupportsSpeechRecognition) {
    return <span>Browser doesn't support speech recognition.</span>;
  }

  return (
    <div>
      <p>Microphone: {listening ? "on" : "off"}</p>
      <button onClick={SpeechRecognition.startListening}>Start</button>
      <button onClick={SpeechRecognition.stopListening}>Stop</button>
      <button onClick={resetTranscript}>Reset</button>
      <p>{transcript}</p>
    </div>
  );
};
export default MicrophoneSpeech;

simple, taken from the documentation.

When i start the application on a wifi IPv4 (http://192.XXX.X.X:3000/wall and click on the button to allow the microphone to start recording it immediately stops. Next to the url there is the symbol of the microphone where it says microphone is blocked. I noticed that that didn't happen when I'm in localhost.

I tried disabling the firewall in Windows but that didnt work.

In your browser you can go to settings/flags where there you can import the specific IP for which you want to give permissions for development purposes to your mic/camera.