I am getting an Invalid Hook call when using useNavigation with the render component in React Native Snap Carousel

Question

I am using React Native Snap Carousel in my project and I want to navigate to a certain page when the particular slide is clicked and I am using functional component. I am trying to use navigation.navigate but it shows invalid hook calls as I am passing that component in the React Native Snap Carousel.

Component File

import React from "react";
import {
  View,
  Text,
  StyleSheet,
  Dimensions,
  Image,
  Pressable,
} from "react-native";

export const SLIDER_WIDTH = Dimensions.get("window").width + 80;
export const ITEM_WIDTH = Math.round(SLIDER_WIDTH);

const CarouselCardItem = ({ item, index,}) => {
  return (
    <Pressable onPress={() => console.warn("helo")}>
      <View style={styles.container} key={index}>
        <Image source={{ uri: item.imgUrl }} style={styles.image} />
      </View>
    </Pressable>
  );
};

export default CarouselCardItem;

Carousel File

const CarouselCards = ({component,loop,sliderWidth,itemWidth,autoplay}) => {
  const isCarousel = useRef(null);
  return (
    <View>
      <Carousel
        layout="default"
        layoutCardOffset={9}
        ref={isCarousel}
        data={data}
        renderItem={component}
        sliderWidth={sliderWidth||SLIDER_WIDTH}
        itemWidth={itemWidth || ITEM_WIDTH}
        inactiveSlideShift={2}
        autoplay={autoplay}
        loop={loop}

        useScrollView={true}

      />
    </View>
  );
};

export default CarouselCards;