Cannot display Twemoji within the emoji picker

[ajfAfg]

The following is displayed.

This code, based on https://github.com/missive/emoji-mart/issues/575#issuecomment-1140387044, uses the picker as follows in Next.js.

export const EmojiPicker = (props: any): JSX.Element => {
  const pickerRef = useRef();
  const moduleRef = useRef();
  const handleDivRef = (divElem: HTMLDivElement) => {
    pickerRef.current = divElem as any;
    if (!moduleRef.current) {
      moduleRef.current = import("emoji-mart").then(
        (m) =>
          new m.Picker({
            ...props,
            ref: pickerRef,
            data: data,
            set: "twitter",
          })
      ) as any;
    }
  };
  return <div ref={handleDivRef} />;
};

Environment

• Emoji Mart 5.0.0
• Next.js 12.1.6
• Node.js 18.3.0
• React 18.1.0
• ReactDom 18.1.0
• TypeScript 4.7.2

[EtienneLem]

When using a set and providing the data locally, you should import the data related to that set. In your case, it would be something like:

import data from '@emoji-mart/data/sets/14/twitter.json'

Sorry for the lack of documentation, we’ll add more soon.

[ajfAfg]

Thank you!!!!!