React nativo - a navegação é indefinida

import { useNavigation } from '@react-navigation/native'; 

const Item = ({item}) => {
  const navigation = useNavigation();
  return (
    <TouchableOpacity onPress={() => navigation.navigate('ProfileScreen')}>
      <Text
        style={{
          textAlign: 'left',
          color: 'white',
          fontSize: 24,
          fontFamily: 'Montserrat_100Thin_Italic',
        }}>
        <Image
          style={{alignSelf: 'center', borderRadius: 50}}
          source={{uri: item.profile_picture, width: 48, height: 48}}
        />
        {item.username}
      </Text>
    </TouchableOpacity>
  );
};
SAMER SAEID