how to speech speechsynthesis works in reactjs without a button?

I tried this .. in my react js to let my browser speak but it is not working on my chrome

import logo from './logo.svg';
import './App.css';
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    let utterance = new SpeechSynthesisUtterance("Hello Wrold! Ready to Navigate!");
    speechSynthesis.speak(utterance);
  }, [])


  return (
    <div className="App">
      <header className="App-header">
 
      </header>
    </div>
  );
}

export default App;

is there a way i can just play without a button