将 rest prop {...others} 传递给 material-ui 组件时出现 Typescript 错误

Question

我创建了一个基于 material-ui 的 Tooltip 组件的 UITooltip。这是我的组件：

import React, { FC } from "react"

import { Tooltip, TooltipProps } from "@material-ui/core"

import { useUITooltipStyles } from "./UITooltip.styles"

export type UITooltipVariantEnum = "primary" | "secondary"
export type UITooltipPlacementEnum =
  | "bottom"
  | "bottom-start"
  | "bottom-end"
  | "top"
  | "top-start"
  | "top-end"

export interface UITooltipProps extends Omit<TooltipProps, "id" | "placement"> {
  id: string
  variant?: UITooltipVariantEnum
  placement?: UITooltipPlacementEnum
}

const UITooltip: FC<UITooltipProps> = (props) => {
  const {
    id,
    variant = "secondary",
    placement = "bottom",
    children,
    ...others
  } = props
  const classes = useUITooltipStyles()

  return (
    <>
      {children && (
        <Tooltip
          aria-label={`${id}-tooltip`}
          data-cy={`${id}-tooltip`}
          classes={{
            tooltip: classes[variant]
          }}
          placement={placement as UITooltipPlacementEnum}
          {...others}
        >
          {children}
        </Tooltip>
      )}
    </>
  )
}

export default UITooltip

但是我在 {...others} 上有这个打字稿错误

Type ...Omit<UITooltipProps & {children?: ReactNode}, "variant" | "id" | "placement" | "children"> is not assignable to type React.ReactElement<any, any> 

有人可以向我解释为什么吗？

我想可能我声明接口的方式有错误

UITooltipProps

和

FC<UITooltipProps>