我试图在我的功能组件中使用usenavigation钩子，但出现了此错误

我的主要组成部分如下：

const TransactionsList: React.FunctionComponent<ITransactionsListProps> = ({
  transactions,
  searchTransactions,
}) => {
  return (
    <Container>
      <DateContainer>
        <DateLabel text={I18n.t('currentAccount.dateToday')} />
      </DateContainer>
      <FlatList
        contentContainerStyle={{ flexGrow: 1, paddingBottom: 25 }}
        scrollEnabled={true}
        data={transactions || searchTransactions}
        showsVerticalScrollIndicator={false}
        keyExtractor={item => `row-${item.id}`}
        renderItem={RenderItem}
      />
    </Container>
  );
};

export default TransactionsList;

以及我尝试使用usenavigation的renderitem组件：

interface IFakeTransactions {
  fisrstName: string;
  lastName: string;
  amount: string;
  co2Cost: string;
  type: string;
  status: string;
  id: string;
  side: string;
}

const RenderItem: ListRenderItem<IFakeTransactions> = ({
item
}): JSX.Element => {
const navigation = useNavigation();
  return (
    <TouchableOpacity
      onPress={() => {
      navigation.navigate('TransactionDetails')
      }}>
      <TransactionItem
        fisrstName={item.fisrstName}
        lastName={item.lastName}
        amount={item.amount}
        co2Cost={item.co2Cost}
        type={item.type}
        status={item.status}
        side={item.side}
      />
    </TouchableOpacity>
  );
};

我如何使用这个钩子或导航道具？