Why do I need to create a child component to get the results from the hook

const SearchFormWrapper = () => {
   const inputs = useQueryInputs();
   return <SearchForm inputs={inputs} onSubmit={onSubmit} />
}

The above one doesn't work, but if I replace it with

const SearchFormWrapper = () => {
   return <SearchFormWrapping />
}

const SearchFormWrapping = () => {
   const inputs = useQueryInputs();
   return <SearchForm inputs={inputs} onSubmit={onSubmit} />
}

EUREKA!, everything works as expected.

Any idea why does this thing happen?