How to set a static property to a functional component when using forwardRef?

Question

Web development

I am writing an application in React + TypeScript.
There is one functional component wrapped in forwardRef.
How to add a static property to it?
Here's what I already tried:

export const MyComp = forwardRef(({}, ref: Ref<any>) => <div/>)

MyComp.myStaticProp = 123
// TS2339: Propety 'myStaticProp' does not exist on type 'ForwardRefExoticComponent< RefAttribute5>'

export const MyComp: ForwardRefExoticComponent<{}> & {myStaticProp: number} = forwardRef(({}, ref: Ref<any>) => <div/>)
// Type ... not assignable. 'myStaticProp' is missing.

MyComp.myStaticProp = 123

export const MyComp = forwardRef(({}, ref: Ref<any>) => <div/>) as ForwardRefExoticComponent<{}> & {myStaticProp: number}

MyComp.myStaticProp = 123

// Тут всё ок, но внешний код почему-то не понимает, что у 'MyComp' есть 'ref'.

Answer 1

I think it's all about <div/>;)