TypeError: Cannot read property 'current' of undefined ( with React.js ) - properties

Question

Whenever I try to use "emoji-picker-react" package, I am facing this error.
I tried to use this package byfollowing the guide.
import React, { useState } from 'react';
import Picker from 'emoji-picker-react';
const Comment = (props) => {
const [chosenEmoji, setChosenEmoji] = useState(null);
...
const onEmojiClick = (event, emojiObject) => {
setChosenEmoji(emojiObject);
};
...
return (
<div>
...
{chosenEmoji ? (
<span>You chose: {chosenEmoji.emoji}</span>
) : (
<span>No emoji Chosen</span>
)}
<Picker onEmojiClick={onEmojiClick} />
</div>
);
};
export default Comment;
These are my installed packages.
{
"name": "...",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.21.1",
"emailjs-com": "^2.6.4",
"emoji-picker-react": "^3.4.7",
"firebase": "^7.18.0",
"hogan": "^1.0.2",
"nodemailer": "^6.6.0",
"pug": "^3.0.2",
"query-string": "^4.3.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-google-login": "^5.2.2",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-spinners": "^0.10.6",
"reactjs-media": "^1.5.1",
"video-react": "^0.14.1",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not op_mini all"
]
}
My project worked well before this using this package.
How to solve this issue? Thanks.

Answer 1

It is mentioned on their npm page that this package doesn't support SSR.
Are you doing server-side rendering?
The variationMenuOpenRef can be undefined in such case.
If that's the case, try to lazy load/dynamically import the component.