So I am working on a MERN stack ecommerce website, wherein i want to integrate wakeword functionality into the website. That is user can navigate the website using the voice commands. To achieve this i am using the Porcupine wakeword engine provided by the picovoice.ai. 
Currently i am testing out the working on a basic react app. I want that the wakeword engine starts and listens continuously for the wakeword, in our case,”Okay Avi”. Until this it only listens and doesnt process the instruction. Upon hearing the wakeword,i.e,”Okay Avi”, it process the next instruction using speech to text api. The instruction should be process by speech to text only after encountering the Wake word.
Below I am attaching the code files of this react app.

VoiceWidget.js : 
import React, { useEffect, useState } from 'react';
import { usePorcupine } from "@picovoice/porcupine-react";
import okayAviKeywordModel from "./okay_avi";
import modelParams from "./porcupine_params";

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

export default function VoiceWidget({ onNewInstruction }) {
  const [isWakeWordDetected, setIsWakeWordDetected] = useState(false);
  const recognition = new SpeechRecognition();
  recognition.continuous = false;
  recognition.interimResults = false;
  recognition.maxAlternatives = 1;

  const {
    keywordDetection,
    init,
    start,
  } = usePorcupine();

  const initEngine = async () => {
    await init(
      "nlNHG6uP9d/n/daV1Aqbi/xb7Spi7QbucVbG2hx5yQZUjHZkhWijJA==",
      {
        "base64": okayAviKeywordModel,
        "label": "Okay Avi"
      },
      { base64: modelParams }
    );
    start();
  };

  useEffect(() => {
    if (keywordDetection !== null && keywordDetection.label === "Okay Avi") {
      setIsWakeWordDetected(true);
      recognition.start();
    }
  }, [keywordDetection,recognition]);

  useEffect(() => {
    recognition.onresult = (event) => {
      const last = event.results.length - 1;
      const instruction = event.results[last][0].transcript;
      if (isWakeWordDetected) {
        onNewInstruction(instruction); // Pass the instruction to the App component
        setIsWakeWordDetected(false);
      }
    };

    recognition.onend = () => {
      if (isWakeWordDetected) {
        setIsWakeWordDetected(false);
      }
    };

    recognition.onerror = (event) => {
      console.error('Speech recognition error:', event.error);
      setIsWakeWordDetected(false);
    };
  }, [recognition, isWakeWordDetected, onNewInstruction]);

  return (
    <div className="voice-widget">
      <h3>
        <button className="init-button" onClick={initEngine}>
          Start
        </button>
      </h3>
    </div>
  );
}

Index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();



I am also attaching the App.js file:
import React, { useState } from 'react';
import './App.css';
import VoiceWidget from "./VoiceWidget";

function App() {
  const [instruction, setInstruction] = useState(''); // State to hold the instruction

  // Function to update the instruction
  const handleNewInstruction = (newInstruction) => {
    setInstruction(newInstruction);
  };

  return (
    <div className="App">
      <h1>ye engine start karne ke liye</h1>
      <VoiceWidget onNewInstruction={handleNewInstruction} />
      <p>Instruction: {instruction}</p> {/* Display the instruction */}
    </div>
  );
}

export default App;