TabPage Lazy is not working properly.

[L2Develop96]

I have created this generic component where it accepts items from outside. The problem is that, the content is being rendered before I have visit the page. I've created two UseEffects in both tabs, and they are both triggering once I enter the page.

Here's the generic component:

import { useTheme } from '@/theme';
import { TabsItems } from '@/types/schemas/types';
import React, { useState } from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { TabController } from 'react-native-ui-lib';

const TabBar = ({
  currentTabIndex,
  setTabIndex,
  items,
}: {
  currentTabIndex: number;
  setTabIndex: React.Dispatch<React.SetStateAction<number>>;
  items: TabsItems;
}) => {
  const { layout, common, backgrounds, gutters } = useTheme();

  const onChangeTabIndex = (tabIndex: number) => () => {
    setTabIndex(tabIndex);
  };

  return (
    <View
      style={[
        layout.justifyAround,
        layout.row,
        gutters.padding_10,
        gutters.marginHorizontal_10,
        backgrounds.gray20,
        {
          borderTopLeftRadius: common.border20.borderRadius,
          borderBottomRightRadius: common.border20.borderRadius,
        },
      ]}>
      {items.map((item, index) => (
        <TouchableOpacity
          key={index}
          style={[
            currentTabIndex === index && backgrounds.light,
            layout.flex_1,
            layout.center,
            gutters.paddingVertical_10,
            {
              borderTopLeftRadius: common.border20.borderRadius,
              borderBottomRightRadius: common.border20.borderRadius,
            },
          ]}
          onPress={onChangeTabIndex(index)}>
          <Text>{item?.label}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

const Tabs: React.FC<{ items: TabsItems }> = ({ items }) => {
  const [currentTabIndex, setTabIndex] = useState(0);

  return (
    <TabController initialIndex={currentTabIndex} items={[{}, {}]} asCarousel>
      <TabBar
        currentTabIndex={currentTabIndex}
        setTabIndex={setTabIndex}
        items={items}
      />
      <TabController.PageCarousel scrollEnabled={false}>
        {items.map(({ component }, index) => (
          <TabController.TabPage key={index} index={index} lazy>
            <ScrollView>{component()}</ScrollView>
          </TabController.TabPage>
        ))}
      </TabController.PageCarousel>
    </TabController>
  );
};

export default Tabs;