Another `template2 is not a function` issue

import { createSignal, For, Match, Switch, type JSX } from "solid-js";
import { Button } from "../Button";
import { Flex } from "../Flex";

type TabProps = {
  Content: JSX.Element;
  Default?: boolean;
  Display: string;
  Value: string;
};

type TabSwitchProps = {
  Tabs: TabProps[];
};

export const TabSwitch = (props: TabSwitchProps) => {
  const [currentTab, setCurrentTab] = createSignal<string | undefined>(
    props.Tabs.find((tab) => !!tab.Default)?.Value ?? props.Tabs.at(0)?.Value
  );

  return (
    <Flex Direction="column" Gap="medium">
      {/* Tab buttons */}
      <Flex AlignItems="center" Direction="row" Gap="small">
        <For each={props.Tabs} fallback={<div></div>}>
          {(tab) => (
            <Button OnClick={() => setCurrentTab(tab.Value)}>
              {tab.Display}
            </Button>
          )}
        </For>
      </Flex>
      {/* Tab content */}
      <Switch>
        <For each={props.Tabs}>
          {(tab) => (
            <Match when={tab.Value === currentTab()}>{tab.Content}</Match>
          )}
        </For>
      </Switch>
    </Flex>
  );
};