How to connect react js voice text to speech into search bar? - reactjs

Question

I want to add speech recognition for the search bar and I connect it with laravel controller. By typing anything I can search for products. I want to add a microphone and when tell something, search and display results. Accually I want to when tell something , it should display in search bar text. How I do this?
import React,{useState,useEffect} from 'react';
import {Link} from 'react-router-dom';
import axios from 'axios';
import swal from 'sweetalert';
import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';
function VoiceSearchBar() {
const [searchInput,setSearchInput] = useState({
searchtext:'',
});
const [searchResults,setSearchResults] = useState([]);
const handleInput = (e) =>{
e.persist();
setSearchInput({...searchInput,[e.target.name]:e.target.value})
}
const {
transcript,
listening,
resetTranscript,
browserSupportsSpeechRecognition
} = useSpeechRecognition();
if (!browserSupportsSpeechRecognition) {
return <span>Browser doesn't support speech recognition.</span>;
}
const submitSearch = (e) =>{
e.preventDefault();
const data = {
searchtext:searchInput.searchtext,
}
axios.post('api/store-search-text', data).then(res=>{
if(res.data.status === 200){
setSearchResults(res.data.text);
console.log(res.data.text);
}
else if(res.data.status === 404){
swal("Warning",res.data.message,"warning")
}
});
}
var results = "";
if(searchResults){
results = searchResults.map((item)=>{
return(
<div key={item.id} className="row">
<div className="col-sm-3">
<img src={`http://localhost:8000/${item.pimage}`} alt={item.name} width="50px"/>
</div>
<div className="col-sm-9">
<Link to={`/products/category/${item.category.slug}/${item.slug}`}><h6 data-bs-dismiss="modal">{item.name}</h6></Link>
<p>{item.meta_description}</p>
</div>
</div>
)
});
}
return (
<div>
<form onSubmit={submitSearch} className="d-flex">
<input className="form-control me-2" onChange={handleInput} value={searchInput.searchtext} type="search" name="searchtext" placeholder="Search" aria-label="Search" />
<div>
{/* <p>Microphone: {listening ? 'on' : 'off'}</p> */}
{/* <button onClick={SpeechRecognition.startListening}>start</button>
<button onClick={SpeechRecognition.stopListening}><button className="resetBtn" onClick={resetTranscript}></button>Stop</button>
<p>{transcript}</p> */}
</div>
<button className="btn btn-success" type="submit" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Search</button>
</form>
<div class="modal fade" id="staticBackdrop" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Search Results</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
{results}
</div>
</div>
</div>
</div>
</div>
);
}
export default VoiceSearchBar;