I really new with react, i'm trying to create a speech to text app using react, i use this module https://github.com/MikeyParton/react-speech-kit. Here's my speech recognition funtion

function SpeechRecognition() {
  const [lang, setLang] = useState("en-US");
  const [value, setValue] = useState("");
  const [blocked, setBlocked] = useState(false);

  const onEnd = () => {
    // You could do something here after listening has finished
  };

  const onResult = (result) => {
    setValue(result);
  };

  const changeLang = (event) => {
    setLang(event.target.value);
  };

  const onError = (event) => {
    if (event.error === "not-allowed") {
      setBlocked(true);
    }
  };

  const { listen, listening, stop, supported } = useSpeechRecognition({
    onResult,
    onEnd,
    onError,
  });

  const toggle = listening
    ? stop
    : () => {
        setBlocked(false);
        listen({ lang });
      };

  return (
      <button disabled={blocked} type="button" onClick={toggle}>
          {listening ? (
            <FontAwesomeIcon icon={faMicrophoneSlash} />
          ) : (
            <FontAwesomeIcon icon={faMicrophone} />
          )}
        </button>
  );
}

it is working on android and windows on any browser, but i can't make it work on IOS whether it's safari or chrome. After i researching about IOS webspeech API, i found this post http://iwearshorts.com/blog/ios-safari-partial-support-of-web-speech-api/ but i cant figure out how to use this line of code on my code

var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition || null;

https://bory-webspeech.netlify.app/ demo of my current development

EDIT

I change this line

const { listen, listening, stop, supported } = useSpeechRecognition({

to

const SpeechRecognition = useSpeechRecognition|| webkitSpeechRecognition || null;
`const { listen, listening, stop, supported } = SpeechRecognition ({`

but on IOS it's still not working