TypeScript error prevents assigning a ref to MarkdownEditor

[phil-coris]

I'm trying to solve an issue where tabbing from a vanilla text input to MarkdownEditor does not focus the MarkdownEditor. I was going to attempt getting around this by listening for a tab button press on the first input and then manually focusing the MarkdownEditor. However, I can't assign a ref.

const $ref = useRef(null);

...

	<MarkdownEditor
		ref={$ref}
		value={noteContent}
		height="400px"
		onFocus={() => {
			console.log('focus');
		}}
		toolbarsFilter={(tool) => {
			// @ts-ignore
			const toolName = tool?.name as string;
			return !['code', 'codeBlock'].includes(toolName);
		}}
		onChange={(value, viewUpdate) => {
			console.log(value);
			setNoteContent(value);
		}}
	/>

This causes the following error:

TS2322: Type '{ ref: MutableRefObject<any>; value: string; height: string; onFocus: () => void; toolbarsFilter: (tool: Commands) => boolean; onChange: (value: string, viewUpdate: ViewUpdate) => void; }' is not assignable to type 'IntrinsicAttributes & IMarkdownEditor'.
  Property 'ref' does not exist on type 'IntrinsicAttributes & IMarkdownEditor'.
    213 |                                                       {/* @ts-ignore */}
    214 |                                                       <MarkdownEditor
  > 215 |                                                               ref={$ref}
        |                                                               ^^^
    216 |                                                               value={noteContent}
    217 |                                                               height="400px"
    218 |                                                               onFocus={() => {

[jaywcjlove]

@phil-coris

import { MarkdownEditorRef } from '@uiw/react-markdown-editor';
const $ref = useRef<MarkdownEditorRef>(null);