emoji-mart rendering duplicate emoji pickers

have recently started using this package. Followed instructions but whenever I call on emoji-mart it displays two emoji-pickers instead of one.

import React, { useEffect, useRef } from 'react'
import { render } from 'react-dom'

import data from '@emoji-mart/data'
import { Picker } from 'emoji-mart'

export default function Test() {
    function EmojiPicker(props) {
        const ref = useRef()
      
        useEffect(() => {
          new Picker({ ...props, data, ref })
        }, [])
      
        return <div ref={ref} />
      }

    return(
        <EmojiPicker onEmojiSelect={console.log} />
    )
}

[CSFlorin]

Refs keep their value in the mount-unmount-mount pattern in React 18 strict mode so you can do

const executedRef = useRef(false);
useEffect(() => {
  if (executedRef.current) return;
  new Picker({});
  executedRef.current = true;
}, []);

[vadholovin]

The bug occurs in React Strict mode.