How to Search by name using the Rest country Api - reactjs

Question

When i search for a country, The searchInput useState works fine and receives the value, problem is it doesn't update the country in the Dom immediately unless i remove the useEffect hook dependency array, And this causes too many re-renders, So how can i update the DOM when i search search, Here is my code.
const countryUrl = `https://restcountries.com/v2/name`;
const [searchInput, setSearchInput] = useState<string>("Nigeria");
const [countryData, setCountryData] = useState<object>([]);
const fetchCountry = (searchInput: any) => {
axios
.get(`${countryUrl}/${searchInput}?fullText=true`)
.then((res) => setCountryData(res.data[0]))
.catch((err) => console.log(err));
};
useEffect(() => {
fetchCountry(searchInput);
}, []);
const handleSubmit = (e: any) => {
e.preventDefault();
fetchWeather(searchInput);
fetchCountry();
};
<form onSubmit={handleSubmit}>
<input
onChange={(e) => setSearchInput(e.target.value)}
placeholder="Enter The Country"
type="text"
/>
<button type="submit">{<CiSearch />} </button>
</form>

Answer 1

Remove searchInput from fetchCountry = (searchInput: any) => {, it will look like fetchCountry = () => {
Reason is you have searchInput in useState so no need to pass as foo param
your fetchCountry will look like
const fetchCountry = () => { // removed params
axios
.get(`${countryUrl}/${searchInput}?fullText=true`)
.then((res) => setCountryData(res.data[0]))
.catch((err) => console.log(err));
};