Issue

The issue here is that you are passing functions to the useState hook and state updater functions which are being interpreted as lazy initialization functions (in the case of useState(PropertyList);) and functional state updates (in the case of setActiveComponent(sidebarViews[0])).

When you pass functions in either of the above cases React will invoke the function and pass the returned result value for the state. This is a problem because in React we never manually/directly call our React functions. The issue is that doing this is calling any internal React hooks outside the React component lifecycle.

On the initial render the PropertyList component is rendered which calls a useEffect hook. When the state is updated to render the Filters component, it appears no new hooks are called and there is now one less React hook called, thus producing the error.

Solution

You could update the logic to use functions that return the React component you wish to store in the state (versus the result of calling the React function). We basically replace the state type from JSX.Element to React.ComponentType, and use functional updates.

Example:

Sidebar

function Sidebar() {
  // Initializer function that returns the React function
  const [ActiveComponent, setActiveComponent] = useState<React.ComponentType>(
    () => PropertyList
  );

  // Array of function component references
  const sidebarViews = [Filters, PropertyList]; // inferred React.ComponentType[]

  return (
    <div className="sidebar">
      <div className="sidebar-top">
        <Navigation
          sidebarViews={sidebarViews}
          setActiveComponent={setActiveComponent}
        />
      </div>
      <div className="sidebar-content">
        {/* Render component as JSX 🙂 */}
        <ActiveComponent />
      </div>
    </div>
  );
}

Navigation

function Navigation({
  sidebarViews,
  setActiveComponent,
}: {
  sidebarViews: React.ComponentType[];
  setActiveComponent: React.Dispatch<React.SetStateAction<React.ComponentType>>;
}) {
  return (
    <div style={{ backgroundColor: "blue", color: "white" }}>
      <div className="sidebar-navigation-bar">
        <NavigationButton
          // Functional state update to return the React function
          onClick={() => setActiveComponent(() => sidebarViews[0])}
          icon="tune"
          key="0"
        />
        <NavigationButton
          // Functional state update to return the React function
          onClick={() => setActiveComponent(() => sidebarViews[1])}
          icon="pin_drop"
          key="1"
        />
      </div>
    </div>
  );
}

An alternative solution would be to store the key that represents the component you wish to render at runtime and compute the component.

const componentsMap = {
  Filters,
  PropertyList,
};

Sidebar

function Sidebar() {
  const [activeComponent, setActiveComponent] =
    useState<keyof typeof componentsMap>("PropertyList");
  const sidebarViews: (keyof typeof componentsMap)[] = [
    "Filters",
    "PropertyList",
  ];

  // Compute the component to render
  const ActiveComponent = componentsMap[activeComponent];

  return (
    <div className="sidebar">
      <div className="sidebar-top">
        <Navigation
          sidebarViews={sidebarViews}
          setActiveComponent={setActiveComponent}
        />
      </div>
      <div className="sidebar-content">
        {/* Render component as JSX 🙂 */}
        <ActiveComponent />
      </div>
    </div>
  );
}

Navbar

function Navigation({
  sidebarViews,
  setActiveComponent,
}: {
  sidebarViews: (keyof typeof componentsMap)[];
  setActiveComponent: React.Dispatch<
    React.SetStateAction<keyof typeof componentsMap>
  >;
}) {
  return (
    <div style={{ backgroundColor: "blue", color: "white" }}>
      <div className="sidebar-navigation-bar">
        <NavigationButton
          onClick={() => setActiveComponent("Filters")}
          icon="tune"
          key="0"
        />
        <NavigationButton
          onClick={() => setActiveComponent("PropertyList")}
          icon="pin_drop"
          key="1"
        />
      </div>
    </div>
  );
}