React Native Error: Cannot read properties of undefined (reading ‘style’) when using custom component

I’m encountering an issue in my React Native expo application where I’m getting an error message that reads: Cannot read property 'style' of undefined when trying to use a custom component within another component.

I have a custom carousel component (Carousel) that uses SliderBox from react-native-image-slider-box": "^2.0.7. This component is defined to display a set of images with specified styles. When I include this Carousel component within my Home component and render it, I encounter the error mentioned above.

//Carousel.jsx:

import { View, StyleSheet } from "react-native";
import React from "react";
import { COLORS } from "@/constants/index";
import { SliderBox } from "react-native-image-slider-box";
import banner1 from "@/assets/images/fn1.jpg";
import banner2 from "@/assets/images/fn2.jpg";
import banner3 from "@/assets/images/fn3.jpg";

const Carousel = () => {
  const bannerData = [banner1, banner2, banner3];
  return (
    <View style={styles.carouselContainer}>
      <SliderBox
        images={bannerData}
        dotColor={COLORS.primary}
        inactiveDotColor={COLORS.secondary}
        ImageComponentStyle={{
          width: "95%",
          borderRadius: 15,
          marginTop: 15,
        }}
      />
    </View>
  );
};

export default Carousel;

const styles = StyleSheet.create({
  carouselContainer: {
    flex: 1,
    alignItems: "center",
  },
});

//Home.jsx:

import {
  SafeAreaView,
  ScrollView,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import React from "react";
import { Ionicons, Fontisto } from "@expo/vector-icons";
import { router } from "expo-router";
import { Welcome, Carousel } from "@/components/home";
import styles from "@/styles/Home/home.style";
import { useSafeAreaInsets } from "react-native-safe-area-context";

const Home = () => {
  const insets = useSafeAreaInsets();

  return (
    <SafeAreaView
      style={{
        paddingTop: insets.top,
        flex: 1,
      }}
    >
      <View style={styles.appBarWrapper}>
        <View style={styles.appBar}>
          <Ionicons name="location-outline" size={24} />
          <Text style={styles.location}>Dhaka, Bangladesh</Text>
          <View
            style={{
              alignItems: "flex-end",
            }}
          >
            <View style={styles.cartCount}>
              <Text style={styles.cartNumber}>8</Text>
            </View>
            <TouchableOpacity onPress={() => router.push("/cart")}>
              <Fontisto name="shopping-bag" size={24} />
            </TouchableOpacity>
          </View>
        </View>
      </View>
      <ScrollView>
        <Welcome />
        <Carousel />
      </ScrollView>
    </SafeAreaView>
  );
};

export default Home;

The error occurs at runtime when Carousel is rendered within Home, specifically at the SliderBox component or its styling properties.

I expect the Carousel component to render without errors and display the carousel of images as intended.