I have a component that calls an api asynchronously and renders other things until the promise is resolved. But now I want the response of that call inorder to render conditionally, but doing this I keep running into errors like 'Rendered more hooks than during the previous render'. Can anyone suggest how can I convert the following into await?

export default function HomePage(props) {
  const {response, err} = useAsync({promiseFn:getUserDetails}) 

const [globalState] = useContext(Context);
const userClass = globalState.isUserStudent;
getStudentService(userClass);

useEffect(()=>{
setSession()
},[])

if(err){
return(
<>
<div>{state.defaultUser}</div>
</>
)
}

if(response){
const userName = response.Name;

return (
<>
<div>{userName}</div>
</>
)
}
return null
}

Now I want to send 1 more parameter in getStudentService i.e response value from getUserDetails. If I do a promise.Resolve, nothing is rendered on screen and I see if called 3 times. If I move the getStudentService call code inside if(response), I get the Rendered too many times error.

How to resolve this?