reactjs - Emoji Mart React, hur man väljer Emoji?

Så jag använder det här biblioteket för emojis som heter emoji-mart.

Jag kan visa emojisarna men jag kan inte välja dem.

Jag har skapat denna EmojiPicker-komponent som bibliotekets dokumentation säger

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

och jag kallar denna komponent så här

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

Detta är gränssnittet för biblioteket

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;
}

Några idéer? . ps(Jag använder TypeScript)

Svar #1

Försök att använda onEmojiSelect istället för onSelect. Det verkar som att den kopierade gränssnittet inte är det du behöver.

I readme-exemplet (https://github.com/missive/emoji-mart) är det onEmojiSelect och det fungerar för mig.