Element type is invalid: expected a string but got undefined

[iron hearth]

I have this very simple header, and the idea is to conditionally render the organization context switcher:

import Logo from "./Logo";
import { FiMoon, FiSun } from "react-icons/fi";
import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { fetchOrganizations } from "@/services/organizations";

export default function HeaderComponent() {
  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
  const router = useRouter();

  const shouldShowOrganizationSelector =
    router.pathname.includes("/org") ?? false;
  const [orgs, setOrgs] = useState<Array<string>>([]);

  const assignOrgs = async () => {
    const orgs = await fetchOrganizations();
    // const orgNames = orgs.map((org) => org.name);
    // setOrgs(orgNames);
  };

  useEffect(() => {
    if (!shouldShowOrganizationSelector) return;

    assignOrgs();
  }, [shouldShowOrganizationSelector]);

  return (
    <Header height={"5rem"}>
      <Group
        position="apart"
        sx={(theme) => ({
          height: "100%",
          width: "100%",
          padding: theme.spacing.md,
        })}
      >
        <Group>
          <Link href="/">
            <Logo />
          </Link>

          <Divider orientation="vertical" />
          {shouldShowOrganizationSelector && (
            <Select placeholder="Organization" data={orgs} w="40%" />
          )}
        </Group>

        <Group>
          <ActionIcon onClick={() => toggleColorScheme()}>
            {colorScheme === "dark" ? <FiSun /> : <FiMoon />}
          </ActionIcon>
        </Group>
      </Group>
    </Header>
  );
}

But I keep on getting this very strange error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I have noticed that if I remove the call to fetchOrganizations , it fixes everything somehow

export async function fetchOrganizations() {
  const response = await axios.get<Organization[]>("/organizations/my");

  return response.data;
}

[sleek ether]

its weird that a fetch call would cause this error, what is more plausible is that once the call is complete, you are rendering something different than before, and in this difference you have the components that are causing the issue

[iron hearth]

if you notice the setState call is commented out, it shouldnt really be rerendering after the fetch call resolves

this is very weird, do you have any suggestions on how I could debug something like this?