set Function not working in custom hook with useEffect - reactjs

Question

I'm working on a custom hook that relies on an async operation in useEffect. I cannot get my set function to actually set the value of the result of the async operation. In this case, country is always null in my App component so nothing is ever rendered. foundCountry gets set correctly, but setCountry doesn't seem to work. Thanks for the help!
const useCountry = name => {
const [country, setCountry] = useState([null]);
useEffect(() => {
const findCountry = async () => {
const foundCountry = await axios.get(
`https://restcountries.eu/rest/v2/name/${name}?fullText=true`
);
setCountry(foundCountry);
};
if (name !== '') findCountry();
}, [name]);
};
And here is my App component where I am using the custom hook
const App = () => {
const nameInput = useField('text');
const [name, setName] = useState('');
const country = useCountry(name);
const fetch = e => {
e.preventDefault();
setName(nameInput.value);
};
return (
<div>
<form onSubmit={fetch}>
<input {...nameInput} />
<button>find</button>
</form>
<Country country={country} />
</div>
);
};

Answer 1

You defined the custom hook, but you forgot to return the country state as the result:
const useCountry = name => {
const [country, setCountry] = useState([null]);
useEffect(() => {
const findCountry = async () => {
const foundCountry = await axios.get(
`https://restcountries.eu/rest/v2/name/${name}?fullText=true`
);
setCountry(foundCountry);
};
if (name !== '') findCountry();
}, [name]);
// you forgot to return it
return country;
};

Answer 2

You can try this
const useCountry = name => {
const foundCountry = await axios.get(
`https://restcountries.eu/rest/v2/name/${name}?fullText=true`
);
if (name !== '') return findCountry();
return;
};
//App container
const [country, setCountry] = useState('');
useEffect(() => {
setCountry(useCountry(name))
}, [name])