I am fetching data to display in my sidebar navigation menu. The data takes a page refresh to display. I have tried adding a loader component until the data loads, but it just stays stuck on the loader. I have also tried fetching the data in a parent component further up the tree, then passing the data as props. The data I'm fetching is called

userGroups

. The data fetching method is auth.js's useSession hook from "next-auth/react".

import { useSession } from "next-auth/react";

export const useCurrentUserGroups = () => {
  const session = useSession();

  return session.data?.user.groups;
};

const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
  const userGroups = useCurrentUserGroups(); ...