Passing parameter onChange using useParams in react-router - reactjs

Question

I am trying to implement search functionality.
I have the navbar component in searchResult component. In navbar there is a search field.
I am trying to call a 5 function simultaneously which update single state. But in my code results are not getting updated.
Navbar.js
<Link to={`/search/${searchField}`} >
<li className="nav-item">
<form id="search-bar">
<input
type="search"
placeholder="Search"
onChange={(e) => setSearchField(e.target.value)}
/>
</form>
</li>
</Link>
SearchResult.js
const { value } = useParams();
const { searchResults, setSearchResults } = useContext(search);
const findMemberFunction = (value) => {
let dataToSubmit = {
referCode: value,
};
dispatch(findMember(dataToSubmit.referCode))
.then((response) => {
let allSearchResult = searchResults;
response.payload.members.map((item) => {
allSearchResult.members.push(item);
});
setSearchResults(allSearchResult);
})
.catch((error) => {
console.log("err", error);
});
};
const findSearchTagFunction = (value) => {
let dataToSubmit = {
name: value,
};
dispatch(findTags(dataToSubmit.name))
.then((response) => {
let allSearchResult = searchResults;
response.payload.tags.map((item) => {
allSearchResult.tags.push(item);
});
setSearchResults(allSearchResult);
})
.catch((error) => {
console.log("err", error);
});
};
const findGroupFunction = (value) => {
let dataToSubmit = {
name: value,
};
dispatch(findGroup(dataToSubmit.name))
.then((response) => {
let allSearchResult = searchResults;
response?.payload?.groups.map((item) => {
allSearchResult.groups.push(item);
});
setSearchResults(allSearchResult);
})
.catch((error) => {
console.log("err", error);
});
};
const findEventFunction = (value) => {
let dataToSubmit = {
name: value,
};
dispatch(findEvent(dataToSubmit.name))
.then((response) => {
let allSearchResult = searchResults;
response.payload.events.map((item) => {
allSearchResult.events.push(item);
});
setSearchResults(allSearchResult);
})
.catch((error) => {
console.log("err", error);
});
};
const findContentFunction = (value) => {
let dataToSubmit = {
name: value,
};
dispatch(findContent(dataToSubmit.name))
.then((response) => {
let allSearchResult = searchResults;
response.payload.contents.map((item) => {
allSearchResult.contents.push(item);
});
setSearchResults(allSearchResult);
})
.catch((error) => {
console.log("err", error);
});
};
useEffect(() => {
findMemberFunction(value);
findSearchTagFunction(value);
findGroupFunction(value);
findEventFunction(value);
findContentFunction(value);
}, [value]);
This is not working as i am expecting to have parameter onChange.