ERROR Error: useCtx must be inside a Provider with a value

[BoavistaLudwig]

I followed the basic guidelines, I checked the demo setups here and on https://github.com/EvanBacon/expo-router-layouts-example/blob/main/app/collapsing-top-tabs/_layout.tsx

but I get this breaking error:

ERROR Error: useCtx must be inside a Provider with a value

and only when I call const props = useScrollProps(); in the child routes ...

Does anyone know how to fix this?

//React
import React from "react";
import { View, Text, ViewBase } from "react-native";

//Internal
/* import theme from "../../../utils/theme";
import ProfileCard from "../../../components/profile/card"; */

//External
import { TopTabs, useScrollProps } from "@bacons/expo-router-top-tabs";

export const unstable_settings = {
  initialRouteName: "highlights",
};

export default function Layout() {
  return (
    <TopTabs>
      <TopTabs.Header>
        <View
          pointerEvents="none"
          style={{
            backgroundColor: "red",
            flexDirection: "row",
            alignItems: "center",
            padding: 24,
          }}
        >
          <View
            style={{
              width: 64,
              height: 64,
              borderRadius: 64 / 2,
              backgroundColor: "#D8D8D8",
            }}
          />
          <View style={{ paddingHorizontal: 24 }}>
            <Text
              style={{ fontWeight: "bold", fontSize: 48 }}
              accessibilityRole="header"
            >
              Ludwig
            </Text>
            <Text
              style={{ fontSize: 16, opacity: 0.5 }}
              accessibilityRole="header"
            >
              User of Expo Router
            </Text>
          </View>
        </View>
      </TopTabs.Header>
      <TopTabs.Screen
        name="highlights"
        options={{
          title: "Highlights",
        }}
      />
      <TopTabs.Screen
        name="contacts"
        options={{
          title: "Contacts",
        }}
      />
    </TopTabs>
  );
}