我正在尝试使用typescript实现下面的tabsample作为react组件;
https://www.w3schools.com/howto/howto_js_tabs.asp
我现在正在开发过程中，一切都很顺利，但我只是有一个关于儿童 prop 类型的问题。
我有一个模板来创建一个选项卡菜单一样;

<Tabs>
    <Tab tabId="home" title="Home">
      <h6>Home page content</h6>
    </Tab>
    <Tab tabId="settings" title="Settings">
      <h6>Settings page content</h6>
    </Tab>
    <Tab tabId="profile" title="Profile">
      <h1>Profile page content</h1>
    </Tab>
   </Tabs>

Tabs组件应该获得一个或多个Tab组件，我已经在TabsProps中声明了这一点。在当前状态下，我将子元素定义为JSX.Element，并按如下方式解析这些元素;

标签 prop ;

export interface TabsProps {
  /**
   * Tab contents
   */
  children?: JSX.Element[]
}

选项卡组件呈现;

return (
    <div>
      <div className="tab">
        {
          children?.map((tab: JSX.Element) => {
            let title = tab.props.title
            let tabId = tab.props.tabId
            return <button key={tabId} className="tablinks" onClick={(event) => onButtonClicked(tabId, event.target)}>{title}</button>
          })

        }
      </div>
      {
        children?.map((tab: JSX.Element) => {
          let tabId = tab.props.tabId
          return (
            <div key={tabId} id={tabId} className="tabcontent">
                {tab.props.children}
            </div>)
        })
      }
    </div>
  );

还有我的tab.js文件;

export interface TabProps {
  /**
   * Unique tab id
   */
  tabId: String;
  /**
   * Tab title
   */
  title: String;
  /**
   * Tab contents
   */
  children: JSX.Element
}

/**
 * Primary tab element to wrap tab contents
 */
const Tab: React.FC<TabProps> = (props) => {
  return <h1>test</h1>
};

export default Tab;

现在我问的是主要问题，子对象类型是JSX.Element数组类型，但我认为应该是props中包含title和tabId元素的类型，在当前状态下，我可以输入let title = tab.props.abc代替let title = tab.props.title，直到运行时都不会有问题，我该如何处理？