TS2322 - false | Element is not assignable to type ReactElement. Error does not consistently appear in app?

I understand what the error is saying and I have been able to fix it, but I was hoping someone could provide some clarification on why it's happening now and why it isn't happening in other areas of my app, as well as why a function and a ternary with essentially the same type signature produce different results.

I wanted to display a basic error message in the following style:

{!!error.message && (<Text>{error.message}</Text>)}

But it gives the error mentioned in the title. I know false is handled by React and won't render anything, but knowing null is the preferred way of telling React not to render something I converted the above into a component. This makes the error go away:

const Error = () => {  if (!error.message) return null;  return <Text>{error.message}</Text>;}

Out of curiosity, I tried the same thing with a ternary which should have the same signature:

{error.message ? <Text>{error.message}</Text> : null}

However this produces a very similar error to the one in the title, except it complain about null instead.

Knowing all 3 bits of code are valid React, and 2/3 being virtually identical, why is only one accepted by the TS compiler?

To further confuse things, I have the below in another part of my app and TS has no issue with it:

{!loaded && (<RootStack.Screen name={SCREENS.SPLASH} component={Splash} />)}{loaded && !userAuth.authenticated && (<><RootStack.Screen name={SCREENS.SIGN_UP} component={SignUp} /><RootStack.Screen name={SCREENS.SIGN_IN} component={SignIn} /></>)}{loaded && userAuth.authenticated && (<RootStack.Screen name={SCREENS.TABS} component={Tabs} />)}