What is the cause of hydration mismatch here?

export default function AuthProvider({ children }) {
  const [user, setUser] = createSignal(null);
  const [isLoading, setIsLoading] = createSignal(true);
  const location = useLocation();
  const navigate = useNavigate();

  const apiUrl = import.meta.env.VITE_API_URL;
  const secret = import.meta.env.AES_SECRET;

  const isAuthenticated = !!user();

  createEffect(() => {
    const checkAuth = async () => {
      try {
        const response = await fetch(
          `${apiUrl}/token/validate`,
          {
            method: "POST"
          }
        );
        if (response.status != 200) {
          console.error("Failed to validate token");
          localStorage.removeItem("account_details");
        }
      } catch (error) {
        console.error("Failed to validate token", error);
        localStorage.removeItem("account_details");
      } finally {
        setIsLoading(false);
      }
    };

    checkAuth();
  });

  createEffect(() => {
    if (!isLoading()) {
      if (!isAuthenticated && location.pathname !== "/login") {
        navigate("/login");
      } else if (isAuthenticated && location.pathname === "/login") {
        navigate("/");
      }
    }
  });

  const context = { user, isAuthenticated, login, logout, isLoading };

  const loading = () => {
    return (
      <div>
        <div>
          <p>Loading...</p>
        </div>
      </div>
    );
  };

  return (
    <AuthContext.Provider value={context}>
      <Show when={!isLoading()} fallback={loading()}>
        <div>
          <Sidebar />
          <div>
            <Header />
            <main>
              {children}
            </main>
          </div>
        </div>
      </Show>
    </AuthContext.Provider>
  );
}