This is my component in which I want to get back transcripts text: import Vapi from "@vapi-ai/web"; import { useState, useEffect } from "react"; const vapiConfig = { transcription: { provider: "deepgram", model: "nova-2-general", language: "en", smartFormat: true, codeSwitchingEnabled: false, endpointing: 300, } }; export const vapi = new Vapi("xyz", vapiConfig); function VapiAssistant() { const [callStatus, setCallStatus] = useState("inactive"); const [transcription, setTranscription] = useState(""); const start = async () => { setCallStatus("loading"); try { await vapi.start("xyz"); } catch (error) { console.error("Error starting VAPI:", error); setCallStatus("inactive"); } }; const stop = () => { setCallStatus("loading"); try { vapi.stop(); } catch (error) { console.error("Error stopping VAPI:", error); } }; useEffect(() => { vapi.on("call-start", () => { console.log("Call started"); setCallStatus("active"); }); vapi.on("call-end", () => { console.log("Call ended"); setCallStatus("inactive"); setTranscription(""); }); vapi.on("transcription", (text) => { console.log("Transcription received:", text); setTranscription(text); }); return () => vapi.removeAllListeners(); }, []); return ( {callStatus === "inactive" ? ( Start ) : null} {callStatus === "loading" ? Loading... : null} {callStatus === "active" ? ( Stop Transcription: {transcription} ) : null} ); } export default VapiAssistant;