Can't put a useRef on the Ant Design drop-down menu button (React Typescript)

Question

I'm using a dropdown list from UI Framework Ant Design, I need to put useRef on it to control it, add or remove Visible={true} attribute. TypeScript gives me this error.

Type '{ children: Element; ref: MutableRefObject; className: string; overlay: Element; trigger: "click"[]; }' cannot be assigned to type 'IntrinsicAttributes & DropDownProps & { children? ReactNode; }'. The 'ref' property does not exist for the type 'IntrinsicAttributes & DropDownProps & { children? ReactNode; }'.

Below are two screenshots, Dropdown Button element and TS error

enter image description here

enter image description here

UPDATE**

My temporary solution looks like this, if I'm on the home page my drop down list is open, if I'm on other pages it opens after a click. But it would be better if through Ref, you could set or remove the attribute visible={true} enter image description here

source code link https://github.com/grigoryanhrant/my-app/blob/master/src/components/Header/index.tsx

Answer 1

React components do not have a ref prop by default, only base elements like <div> and <span> etc. do. In order for a React component to pass through a ref prop, you must use React.forwardRef().

It looks like the antd "Dropdown" component does not utilize React.forwardRef(), so you are screwed in this case. Of course, you could check their contribution guidelines and explore submitting an update to their codebase to implement this...