我有一个属于 UI 库的组件，我们称之为输入组件。使用这个库调用 Input 时，可以调用的类型很多。例如

<Input />
<Input.TextArea />
<Input.Search />

现在我想给这个 Input 组件写一个包装器，所以我这样写

type InputWrapperComponent = FC<InputProps> & {
  Search: typeof Input.Search;
  TextArea: typeof Input.TextArea;
};

const InputWrapper: InputWrapperComponent = (props) => {
  // make some minor changes here
}

InputWrapper.Search = Input.Search;
InputWrapper.TextArea = Input.TextArea;
export default InputWrapper;

在index.tsx 中

export { default as InputWrapper } from './input';

然后我可以像这样使用它们：

<InputWrapper />. --> Works
<InputWrapper.TextArea />. --> Works
<InputWrapper.Search />. --> Works

但是通过这样做，我无法使用原始 UI 库的ref方法（例如inputRef.current.focus()）。这就是为什么我像这样使用forwardRef和ForwardRefRenderFunction

type InputWrapperComponent = ForwardRefRenderFunction<HTMLInputElement, InputProps> & {
  Search: typeof Input.Search;
  TextArea: typeof Input.TextArea;
};

const InputWrapper: InputWrapperComponent = (props, ref) => {
  // make some minor changes here and add the ref to the input
}

InputWrapper.Search = Input.Search;
InputWrapper.TextArea = Input.TextArea;
export default forwardRef(InputWrapper);

通过更改为这个，我可以将 ref 传递给原始 UI 库并可以使用其原始方法。然而，现在我的问题是，当我改变forwardRef和ForwardRefRenderFunction，我不能把文本区，并搜索了

<InputWrapper />. --> Works
<InputWrapper.TextArea />. --> Error
<InputWrapper.Search />. --> Error

这是错误：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

任何人都可以给我一些指导吗？谢谢