Typescript 创建一个通用上下文，允许正确推断其中的子项

我很难理解如何创建通用上下文. 基本上我想要的是能够将一个值传递给Root，然后让子元素们推断正确的类型，这可能吗？我知道这很有可能，因为TabHeaderProps、TabContextProps和TabRootProps之间没有联系.

这是一个可行的简化版本，但它比我希望的更冗长.

import React, { Dispatch, SetStateAction, useState } from 'react';

type Headers = 'Foo' | 'Bar' | 'Baz';
const defaultValue: Headers = 'Foo';

type TabsContextProps<T = any> = {
  activeTab: T;
  setActiveTab: Dispatch<SetStateAction<T | undefined>>;
};

const TabsContext = React.createContext<TabsContextProps | undefined>(
  undefined,
);

type TabsRootProps<T> = {
  defaultValue: T;
  children: React.ReactNode;
};

export function TabsRoot<T>({ children }: TabsRootProps<T>) {
  const [activeTab, setActiveTab] = useState<T>();

  return (
    <TabsContext.Provider
      value={{
        setActiveTab,
        activeTab,
      }}
    >
      {children}
    </TabsContext.Provider>
  );
}

function useTabsRootContext<T>(): TabsContextProps<T> {
  if (!React.useContext(TabsContext)) {
    throw new Error('useTabsRootContext must be used inside TabsRoot');
  }
  return React.useContext(TabsContext) as TabsContextProps<T>;
}

type TabHeaderProps<T> = {
  value: T;
};

const TabsHeader = <T,>({ value }: TabHeaderProps<T>) => {
  const { activeTab } = useTabsRootContext<T>();
  if (!activeTab !== value) {
    return null;
  }
  return <p>Im Active</p>;
};

const Tabs = () => {
  <TabsRoot<Headers> defaultValue={defaultValue}>
    <TabsHeader<Headers> value="Baz" /> {/* This work but i preferably want this to be infered based on the TabsRootType */}
  </TabsRoot>;
};

理想情况下我希望拥有它:

const Tabs = () => {
  <TabsRoot defaultValue={defaultValue}>
    <TabsHeader value="Baz" />
    <TabsHeader value="error" /> {/* I want this to throw an error */}
  </TabsRoot>;
};