'How to specify props with passing child component props

I have component WithCaption. I want to be able to pass some specific props to this component + be able to pass props here for the ControllerComponent component in order to be able to customize it. But I can't get the types right:

type CaptionProps<T> = {
  ControllerComponent: React.ComponentType<T & { className: string }>;
  componentClassName: string;
  children: React.ReactNode;
  className: string;
};

const WithCaption = <T,>({
  ControllerComponent,
  componentClassName,
  children,
  className,
  ...props
}: CaptionProps<T> & T) => {
  return (
    <label className={cn(s['with-caption'], className)}>
      <ControllerComponent {...props} className={cn(s['with-caption__elem'], componentClassName)} />
      <Typo color={TypoColor.light} view={TypoView.h5}>
        {children}
      </Typo>
    </label>
  );
};

export default WithCaption;

What do I need to fix?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source