useSession not reactive?

const authClient = createAuthClient();
const { signIn, useSession } = authClient;

// Method 1: Using destructured methods - This works
signIn(...);
useSession();
// When you use both destructured methods together, the session updates properly


// Method 2: Using direct object methods - This works too
authClient.signIn(...);
authClient.useSession();
// When you use both direct object methods together, the session updates properly


// Method 3: Mixing styles - This breaks! :x:
authClient.signIn(...);
useSession();
// When you mix direct object access with destructured methods, it breaks because it disrupts the object reference needed to trigger atoms.
// We'll try to investigate on how we potentially support them interchangeably. But we'll document this in the meantime

const authClient = createAuthClient();
const { signIn, useSession } = authClient;

// Method 1: Using destructured methods - This works
signIn(...);
useSession();
// When you use both destructured methods together, the session updates properly


// Method 2: Using direct object methods - This works too
authClient.signIn(...);
authClient.useSession();
// When you use both direct object methods together, the session updates properly


// Method 3: Mixing styles - This breaks! :x:
authClient.signIn(...);
useSession();
// When you mix direct object access with destructured methods, it breaks because it disrupts the object reference needed to trigger atoms.
// We'll try to investigate on how we potentially support them interchangeably. But we'll document this in the meantime

// Method 2: Using direct object methods - This works too
authClient.signIn(...);
authClient.useSession();

// Method 2: Using direct object methods - This works too
authClient.signIn(...);
authClient.useSession();

export default function AppWrapper({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const { data, isPending, refetch } = authClient.useSession();

  useLayoutEffect(() => {
    useSettings.persist.rehydrate();
    refetch(); // <- Added This
  }, []);

  console.log(isPending);

  return (
    <>
     <Navbar/>
      {children}
      {isPending && <PageLoader />}
    </>
  );
}
function PageLoader() {
  return (
    <div className="fixed inset-0 z-50 grid place-items-center">
      <div className="bg-foreground/40 absolute inset-0 backdrop-blur-xs" />
      <LoaderCircle
        className="text-border relative z-50 animate-spin"
        size={70}
      />
    </div>
  );
}

export default function AppWrapper({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const { data, isPending, refetch } = authClient.useSession();

  useLayoutEffect(() => {
    useSettings.persist.rehydrate();
    refetch(); // <- Added This
  }, []);

  console.log(isPending);

  return (
    <>
     <Navbar/>
      {children}
      {isPending && <PageLoader />}
    </>
  );
}
function PageLoader() {
  return (
    <div className="fixed inset-0 z-50 grid place-items-center">
      <div className="bg-foreground/40 absolute inset-0 backdrop-blur-xs" />
      <LoaderCircle
        className="text-border relative z-50 animate-spin"
        size={70}
      />
    </div>
  );
}