How to add react context menu in react-wordcloud?

Question

I'm working on integrating a word cloud component into my React application, and I'm using the ReactWordcloud component to display the word cloud. I would like to implement right-click functionality so that users can perform custom actions when they right-click on a word in the word cloud.

I've tried onWordContextMenu prop in callback but there is no such prop in docs.

However, I'm unsure about how to integrate this functionality with the ReactWordcloud component. Can someone guide me on how to add right-click functionality to individual words in the word cloud?

function TickerKeywordsCloudContent() {
  const dispatch = useDispatch();
 
  const [clickedWord, setClickedWord] = useState({
    text: "",
    value: "",
    objects: [],
  });

  const isTickerKeywordsCloudLoading = useSelector(
    selectIsTickerKeywordsCloudLoading
  );
  const tickerKeywordsCloudData = useSelector(selectTickerKeywordsCloudData);

  const callbacks = {
    onWordClick: (e) => {
      console.log("Left-click event", e);
      

      setClickedWord({
        text: e.text,
        value: e.value,
        objects: e.objects,
      });
    },
    onWordContextMenu: (e) => {
      e.preventDefault(); // Prevent default right-click behavior (context menu)
      console.log("Right-click event", e);
      // Add your desired functionality for right-click here
    },
    getWordTooltip: (word) =>
      `${word.text} (${word.value}) [${word.value > 50 ? "" : ""}]`,
  };





  return (
    <>
      <div className="flex flex-col p-12 m-20">
        <div className="p-8 bg-white h-[600px]" id="keyword-cloud">
          {tickerKeywordsCloudData?.length > 0 && (
            <ReactWordcloud
              words={tickerKeywordsCloudData}
              callbacks={callbacks}
              options={options}
            />
          )}
        </div>
      </div>
`
     
    </>