React Native ScrollView component onScroll prop function is delayed

I am using react-native-paper library to add a floating action button (FAB) which changes its width based on the scroll direction of the user.

What it's supposed to do - If the user is scrolling upward expand the FAB instantly and contract on scrolling downward.

What's happening - It is giving me the desired results but for some reason its take 3-4 seconds for the effect to take place.

Code -

import React from "react";
import { SafeAreaView, ScrollView } from "react-native";
import { AnimatedFAB } from "react-native-paper";
import Carousel from "../../components/carousel";
import Slider from "../../components/slider";

const HomePage = () => {
  const [isExtended, setIsExtended] = React.useState(true);
  function onScroll({ nativeEvent }: any) {
    const currentScrollPosition =
      Math.floor(nativeEvent?.contentOffset?.y) ?? 0;
    setIsExtended(currentScrollPosition <= 0);
  }
  const categories = [
    "Fruits",
    "Cars",
    "Places",
    "Brands",
    "Colors",
    "Shapes",
    "Sizes",
    "Names",
  ];

  return (
    <SafeAreaView>
      <ScrollView onScroll={onScroll}>
        <Carousel />
        {categories.map((item, index) => (
          <Slider key={index} title={item} />
        ))}
      </ScrollView>
      <AnimatedFAB
        style={{
          position: "absolute",
          bottom: 20,
          right: 20,
        }}
        icon="filter-variant"
        label="Filter"
        animateFrom="right"
        extended={isExtended}
        onPress={() => console.log("Pressed")}
      />
    </SafeAreaView>
  );
};

export default HomePage;

Here is how the Sliders/Carousel looks [they share similar code]

import React from "react";
import { FlatList, StyleSheet, View, SafeAreaView } from "react-native";
import { Text } from "react-native-paper";
import data from "../../../data";
import Card from "../card";

const Slider = ({ title }: any) => {
  const renderItem = ({ item }: any) => <Card item={item} />;
  return (
    <SafeAreaView>
      <View style={styles.container}>
        <Text style={styles.itemTitle}>{title}</Text>
        <FlatList
          showsVerticalScrollIndicator={false}
          showsHorizontalScrollIndicator={false}
          horizontal
          data={data}
          renderItem={renderItem}
          keyExtractor={(_, index) => index.toString()}
        />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    margin: 20,
  },
  itemTitle: {
    color: "#fff",
    marginBottom: 20,
    fontSize: 20,
    fontWeight: "500",
  },
  title: {
    fontSize: 32,
  },
});

export default Slider;

Solutions i tried -

I tried using the useEffect hook but didn’t notice a significant change. I tried using the Flatlist component but the issue remains the same.