Emoji Mart React , How to select Emoji?

So I'm using this library for emojis called emoji-mart.

I can show the emojis but I can not select them.

I have created this EmojiPicker Component as the library documentation says

import React, { useEffect, useRef } from "react"

import data from "@emoji-mart/data"
import { Picker, PickerProps } from "emoji-mart"

const EmojiPicker = (props: PickerProps | Readonly<PickerProps> | any) => {
    const ref = useRef() as React.MutableRefObject<HTMLInputElement>

    useEffect(() => {
        new Picker({ ...props, data, ref })
    }, [props])

    return <div ref={ref} />
}

export default EmojiPicker

and I'm calling this component like this

 <div ref={ref} className="emoji-picker">
                                <EmojiPicker onSelect={handleOnSelect} />
                            </div>

This is the interface of the library

export interface PickerProps {
    /** NOTE: default is not preventable */
    onClick?(emoji: EmojiData, e: React.MouseEvent<HTMLElement>): void;
    onSelect?(emoji: EmojiData): void;
    onSkinChange?(skin: EmojiSkin): void;
    perLine?: number | undefined;
    emojiSize?: number | undefined;
    i18n?: PartialI18n | undefined;
    style?: React.CSSProperties | undefined;
    title?: string | undefined;
    theme?: 'auto' | 'light' | 'dark' | undefined;
    emoji?: string | undefined;
    color?: string | undefined;
    set?: EmojiSet | undefined;
    skin?: EmojiSkin | undefined;
    defaultSkin?: EmojiSkin | undefined;
    native?: boolean | undefined;
    backgroundImageFn?: BackgroundImageFn | undefined;
    sheetSize?: EmojiSheetSize | undefined;
    emojisToShowFilter?(emoji: EmojiData): boolean;
    showPreview?: boolean | undefined;
    showSkinTones?: boolean | undefined;
    emojiTooltip?: boolean | undefined;
    include?: CategoryName[] | undefined;
    exclude?: CategoryName[] | undefined;
    recent?: string[] | undefined;
    autoFocus?: boolean | undefined;
    /** NOTE: custom emoji are copied into a singleton object on every new mount */
    custom?: CustomEmoji[] | undefined;
    skinEmoji?: string | undefined;
    notFound?(): React.Component;
    notFoundEmoji?: string | undefined;
    icons?: CustomIcons | undefined;
    enableFrequentEmojiSort?: boolean | undefined;
    useButton?: boolean | undefined;
}

Any ideas? . ps(Im using typescript)