Tooltip doesn't work

[KirillAleshkin]

Hi Can you help me tooltip doesn't work when i try to use react structure

export const CiChartVenn = () => {
  const canvasRef = useRef(null);

  const vennOptions = useMemo(() =>  {
    return {
      type: "venn",
      data: extractSets(
        [
          {
            label: "A",
            values: ["alex", "casey", "drew", "hunter", "jade"]
          },
          { label: "B", values: ["casey", "drew", "jade"] },
          { label: "C", values: ["drew", "glen", "jade", "hunter"] },
          { label: "D", values: ["drew", "glen", "jade", "hunter"] }
        ],
        {
          label: 'Sports',
        }
      ),
      options: {
        plugins: {
          tooltip: {
            enabled: true,
            position: 'nearest',
            bodyColor: 'red',
            backgroundColor: 'rgba(249, 231, 159, 1)'
          }
        },
        title: {
          display: true,
          text: 'Venn Diagram'
        },
        backgroundColor: [
          "rgba(255, 26, 104, 0.2)",
          "rgba(54, 162, 235, 0.2)",
          "rgba(255, 206, 86, 0.2)",
          "rgba(75, 192, 192, 0.2)",
          "rgba(153, 102, 255, 0.2)",
          "rgba(255, 159, 64, 0.2)"
        ],
        borderWidth: 1,
        // borderColor: [
        //   "rgba(255, 26, 104, 1)",
        //   "rgba(54, 162, 235, 1)",
        //   "rgba(255, 206, 86, 1)",
        //   "rgba(75, 192, 192, 1)",
        //   "rgba(153, 102, 255, 1)",
        //   "rgba(255, 159, 64, 1)"
        // ]
      }
    };
  }, []);

  // console.log(props.data,'config');

  useEffect(() => {
    const vennChart = new VennDiagramChart(canvasRef.current as any, vennOptions as any);

    return () => {
      vennChart.destroy();
    }
  },[vennOptions]);

  return (
    <div>
      <canvas ref={canvasRef} id="canvas"></canvas>
    </div>
  );
};