如何正确记录复合组件？
我有这个孩子的组件

/**
 * A React component that provides help text to the user.
 * @typedef HelpText
 * @type {typeof HelpText}
 * @param id - The ID of the help text element (required).
 * @param text - The text message to display (optional).
 * @param cssClasses - The CSS classes to apply to the help text element (optional).
 * @param children - The child component(s) to include in the help text element (optional). could be used instead of text prarameter.
 * @returns A memoized div element with the specified ID and CSS classes, containing the text and/or child component(s).
 */
const HelpText: React.FC<IHelpText> = ({
  id,
  text,
  cssClasses = "form-text",
  children,
}) => {
  return (
    <div id={id + "-helpText"} className={cssClasses}>
      {text}
      {children}
    </div>
  );
};

export default HelpText;

当我将其悬停在

上时，我可以正确地看到它的文档
我想把它做成一个复合组件的子组件

import HelpText, { IHelpText } from "../HelpText";

interface IFormTestProps {
    children: React.ReactNode;
  }

  const FormTest: React.FC<IFormTestProps> & { HelpText: React.FC<IHelpText> } = ({ children }) => {    
    return (
    <>
        {children} 
    </>
    );
};

 FormTest.HelpText = HelpText;

export default FormTest;

我怎样才能使FormTest.HelpText被正确记录？