React hook Text to speech web api

import { useCallback,useState } from "react"; export const useSpeachSynthesisApi = () => { const [text, setText] = useState<string>(""); const [isSpeaking, setIsSpeaking] = useState<boolean>(false); const [isPaused, setIsPaused] = useState<boolean>(false); const [isResumed, setIsResumed] = useState<boolean>(false); const [isEnded, setIsEnded] = useState<boolean>(false); const speak = useCallback(() => { var msg = new SpeechSynthesisUtterance(); msg.text = <string>text; function speak() { window.speechSynthesis.speak(msg); } speak(); setIsSpeaking(true); setIsEnded(false); }, [text]); const pause = useCallback(() => { function pause() { window.speechSynthesis.pause(); } pause(); setIsPaused(true); setIsSpeaking(false); setIsEnded(false); setIsResumed(false); }, []); const resume = useCallback(() => { function resume() { window.speechSynthesis.resume(); } resume(); setIsPaused(false); setIsSpeaking(false); setIsEnded(false); setIsResumed(true); }, []); const cancel = useCallback(() => { function cancel() { window.speechSynthesis.cancel(); } cancel(); setIsPaused(false); setIsResumed(false); setIsSpeaking(false); setIsEnded(true); }, []); return { text, setText, isSpeaking, isPaused, isResumed, isEnded, speak, pause, resume, cancel } }