Recognition.onresult not working in react

I have been trying to show my results on console but it's not working. for some reason, console is printing "listening" but doesn't fire onresult function after I done my speech.

import React, { useEffect, useState } from 'react';
import './App.css';

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.start();

const URL = 'https://www.google.com/search?q=';

export const App = () => {

    const [text, setText] = useState('');
    const [action, setAction] = useState('');

    useEffect(() => {
        recognition.onstart = () => {
            console.log('Listening');
        }

        recognition.onresult = (e) => {
            console.log(e);
        }
    });

    return <div>
        <div>{ action }</div>
        <div>{ text }</div>
    </div>
}