PanelHeaderMenuTrigger: Store clickCoordinates in a ref instead of state (#65601)

rewrite panelheadermenutrigger to use ref instead of state

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, MouseEvent, ReactElement, useCallback, useState } from 'react';
+import React, { HTMLAttributes, MouseEvent, ReactElement, useCallback, useRef, useState } from 'react';
 
 import { CartesianCoords2D } from '@grafana/data';
 
@@ -12,26 +12,23 @@ interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
 }
 
 export function PanelHeaderMenuTrigger({ children, ...divProps }: Props) {
-  const [clickCoordinates, setClickCoordinates] = useState<CartesianCoords2D>({ x: 0, y: 0 });
+  const clickCoordinates = useRef<CartesianCoords2D>({ x: 0, y: 0 });
   const [panelMenuOpen, setPanelMenuOpen] = useState<boolean>(false);
 
   const onMenuToggle = useCallback(
     (event: MouseEvent<HTMLDivElement>) => {
-      if (!isClick(clickCoordinates, eventToClickCoordinates(event))) {
+      if (!isClick(clickCoordinates.current, eventToClickCoordinates(event))) {
         return;
       }
 
       setPanelMenuOpen(!panelMenuOpen);
     },
-    [clickCoordinates, panelMenuOpen, setPanelMenuOpen]
+    [panelMenuOpen, setPanelMenuOpen]
   );
 
-  const onMouseDown = useCallback(
-    (event: MouseEvent<HTMLDivElement>) => {
-      setClickCoordinates(eventToClickCoordinates(event));
-    },
-    [setClickCoordinates]
-  );
+  const onMouseDown = useCallback((event: MouseEvent<HTMLDivElement>) => {
+    clickCoordinates.current = eventToClickCoordinates(event);
+  }, []);
 
   return (
     <header {...divProps} className="panel-title-container" onClick={onMenuToggle} onMouseDown={onMouseDown}>