React Native: How to conditionally render a value returned from a function that calls Firebase function?

In my React Native app, I have the following function that returns a value from Firebase:

const func = () => {
  const a = useFirestoreCollection(
    userRepository
      .getRef()
      .collection('collection1')
      .doc('doc1')
  )
  return a.name;
}

and then the component looks like this:

return (
  <Text>
    {func()}
  </Text>
)

The problem is, I want to render it conditionally, like this:

return (
  <Text>
    {func() ? func() : "backup"}
  </Text>
)

but this throws the error Rendered more hooks than during the previous render.

How can I achieve this conditional render?