How to render a component that relies on json returned from action

[Oyetomi]

i was wondering how to use useNavigation() state to render a component that depends on a json response returned from action(depending on userinput) .

i tried checking if theres POST submission and the navigation is idle after the form post submission
but keep getting "This comparison appears to be unintentional because the types  'loading' | 'submitting'  and  'idle'  have no overlap".
any help would be appreciated .

const user = useActionData()
  if (navigation.formAction === "POST" && navigation.state === "idle") {
  return (<>{user.data}</>)  
 }

[Oyetomi]

checking if user is undefined works