How can i pass a JSX Element as Prop in React with Typescript?

Question

I want to pass an Icon as a Prop to my TextInput Component like this:

export interface TextInputProps {
  leadingIcon?: (props: React.ComponentProps<'svg'>) => JSX.Element
}

export const TextInputField = forwardRef<HTMLInputElement, InputFieldProps>({ leadingIcon, ...props }, ref) => {
   const LeadingIcon = leadingIcon
   return (
     <div className="flex">
        {leadingIcon ? (
           <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-one">
              <LeadingIcon className="h-5 w-5 text-gray-400" />
           </div>
        ) : null}
       <input {...input} {...props} ref={ref} className="block w-full shadow-sm" />
    </div>
   )
}

and i want to use it like this

<TextInputField leadingIcon={MailIcon} />

but i always get the typescript error:

JSX element type 'LeadingIcon' does not have any construct or call signatures .ts(2604)

What do i need to change to get this working?

Answer 1

Try: leadingIcon?: React.ElementType