TypeError: _tabbedHeaderPagerRef.goToPage is not a function (it is undefined)

[Jamal-ReachFirst]

Environment

Library version:

"react-native": "0.72.10",
"react-native-sticky-parallax-header": "^1.1.1",

Affected platforms

• Android
• iOS

Current behavior

goToPage is undefined

Expected behavior

I want to dynamically change the active tab by call goToPage method available in the doc

Reproduction

import React, { useRef, useState } from 'react';
import { View, StyleSheet, Animated, StatusBar, useColorScheme, TouchableOpacity, RefreshControl } from 'react-native';
import { TabbedHeaderPager } from 'react-native-sticky-parallax-header';
import Icon from "react-native-vector-icons/Ionicons";
import LeavesHistory from './leavesHistory';
import PendingLeaves from './pendingLeaves';
import ApprovedLeaves from './approvedLeaves';
import { Layout } from 'constants/constants';
import { RFValue } from 'react-native-responsive-fontsize';
import CollapsibleHeader from './collapsibleHeader';
import CustomText from 'components/uiComponents/text';
import CustomMenu from 'components/uiComponents/customMenu';
import { StackScreenProps } from '@react-navigation/stack';
import { MainStackParamList } from 'types/navigationTypes';

const TABBED_SECTIONS = [
  { title: 'History', component: LeavesHistory },
  { title: 'Pending', component: PendingLeaves },
  { title: 'Approved', component: ApprovedLeaves },
];

type Props = StackScreenProps<MainStackParamList, 'Example'>;

const Example: React.FC<Props> = ({route, navigation}) => {

  const tabbedHeaderPagerRef = useRef<any>(null);

  const changeActiveTab = (pageIndex: 0|1|2) => {
    if (tabbedHeaderPagerRef.current) {
      tabbedHeaderPagerRef.current?.goToPage(pageIndex)
    }
  };

  return (
    <View style={styles.container}>
        <TabbedHeaderPager
          ref={tabbedHeaderPagerRef}
          initialPage={route.params.initialRouteNumber||0}
          rememberTabScrollPosition
          stickyHeaderHiddenOnScroll={true}
          containerStyle={styles.stretchContainer}
          backgroundColor={Layout.colors.backgroundColor}
          tabsContainerHorizontalPadding={0}
          tabsContainerStyle={styles.tabsContainerStyle}
          tabTextContainerStyle={styles.tabTextContainerStyle}
          tabTextContainerActiveStyle={styles.tabTextContainerActiveStyle}
          tabTextStyle={styles.tabTextStyle}
          tabWrapperStyle={styles.tabWrapperStyle}
          tabTextActiveStyle={styles.activeTabTextStyle}
          showsVerticalScrollIndicator={false}
          renderHeader={() => <CollapsibleHeader /> }
          tabs={TABBED_SECTIONS.map((section) => ({
            title: section.title,
          }))}
        >
          {TABBED_SECTIONS.map((Section) => (
            <View key={Section.title} style={styles.content}>
              <Section.component onClick={(val: number) => changeActiveTab(val)} />
            </View>
          ))}
        </TabbedHeaderPager>
    </View>
  );
};

const styles = StyleSheet.create({
   ...........
});

export default Example;