Using FlatList when rendering anything more than a single "" causes error

Question

I'm using FlatList as follows:

<FlatList
      data={nodes}
      renderItem={({ item }) => <Goal goal={item} />}
      keyExtractor={item => item.id}
/>

I'm getting this error:

Error: Text strings must be rendered within a component.

when following component is passed to renderItem

const Goal = (props: { goal: GoalProps }) => {
  const listTags = props.goal.tags.map(tag =>
    <li key={tag.id}> {tag.name} </li>
  );
  return <>
    <Text>goal title: {props.goal.title}</Text>
    <ul>{listTags}</ul>
  </>
}

When I simply return just one <Text> then it works without error. This works:

const Goal = (props: { goal: GoalProps }) => {
  const listTags = props.goal.tags.map(tag =>
    <li key={tag.id}> {tag.name} </li>
  );
  return <Text>goal title: {props.goal.title}</Text>
}

How can I pass a more complex component to FlatList? Or maybe there is another list component I can use? I'm new to React and React Native.