title: How to toggle between display: none and display:block on click
body: <p>I am using a React library to implement a bar chart and what I am trying to achieve is to show the tooltip only when I click on a series. I am trying to achieve this by toggling between display block and none, but currently, the tooltip is not showing up. What am I doing wrong here? Here is my code:</p>
  <pre><code>import React, { useState } from 'react';
  import * as ReactDOM from 'react-dom';
  import {
    Chart,
    ChartTooltip,
    ChartSeries,
    ChartSeriesItem,
    ChartSeriesItemTooltip,
  } from '@progress/kendo-react-charts';
  import 'hammerjs';
  const seriesData = [1, 2, 3];
  const ChartContainer = () =&gt; {
    let [isVisible] = React.useState('none');
    return (
      &lt;Chart
        onSeriesClick={(e) =&gt; {
          // let positionX = e.originalEvent.x.client;
          // let positionY = e.originalEvent.y.client;
          // let value = e.value;
  
          // alert(positionX, positionY, value);
          let positionX = e.nativeEvent.x;
          let positionY = e.nativeEvent.y;
          let value = e.value;
          let myTooltip = document.querySelector('.k-chart-tooltip-wrapper');
          console.log(myTooltip);
          myTooltip.style.display = 'block' != 'none';
        }}
      &gt;
        &lt;ChartTooltip className=&quot;my-tooltip&quot; /&gt;
        &lt;ChartSeries&gt;
          &lt;ChartSeriesItem data={seriesData} /&gt;
          &lt;ChartSeriesItem data={seriesData}&gt;
            &lt;ChartSeriesItemTooltip background=&quot;green&quot; /&gt;
          &lt;/ChartSeriesItem&gt;
        &lt;/ChartSeries&gt;
      &lt;/Chart&gt;
    );
  };
  
  ReactDOM.render(&lt;ChartContainer /&gt;, document.querySelector('my-app'));
  </code></pre>
  <p>and here is an example that can be tested:</p>
  <p><a href="https://stackblitz.com/edit/react-ahypjv-xtf7nr?file=app/main.jsx" rel="nofollow noreferrer">https://stackblitz.com/edit/react-ahypjv-xtf7nr?file=app/main.jsx</a></p>