Hide the cartouche context menu when an element is clicked (#5998)

## Problem
When opening the data picker from the cartouche context menu, the
context menu is momentarily overlaid on top of the data picker

https://screenshot.click/19-00-v43zc-u88e3.mp4

## Fix
Manually hide the context menu when an option is chosen

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Preview mode

editor/src/components/inspector/sections/component-section/data-reference-cartouche.tsx

@@ -32,6 +32,7 @@ import { AllHtmlEntities } from 'html-entities'
 import { ContextMenuWrapper } from '../../../context-menu-wrapper'
 import type { ContextMenuItem } from '../../../context-menu-items'
 import { optionalMap } from '../../../../core/shared/optional-utils'
+import { useContextMenu } from 'react-contexify'
 
 const htmlEntities = new AllHtmlEntities()
 
@@ -239,12 +240,20 @@ export const DataCartoucheInner = React.forwardRef(
         ? 'external'
         : 'internal'
 
+    const contextMenuId = `cartouche-context-menu-${props.testId}`
+
+    const { hideAll: hideContextMenu } = useContextMenu({ id: contextMenuId })
+
     return (
       <ContextMenuWrapper<ContextMenuItemsData>
-        id={`cartouche-context-menu-${props.testId}`}
+        id={contextMenuId}
         dispatch={dispatch}
         items={contextMenuItems}
-        data={{ openDataPicker: onDoubleClick, deleteCartouche: onDeleteCallback }}
+        data={{
+          openDataPicker: onDoubleClick,
+          deleteCartouche: onDeleteCallback,
+          hideContextMenu: hideContextMenu,
+        }}
       >
         <CartoucheUI
           onDelete={onDelete}
@@ -270,6 +279,7 @@ export const DataCartoucheInner = React.forwardRef(
 type ContextMenuItemsData = {
   openDataPicker?: () => void
   deleteCartouche?: () => void
+  hideContextMenu: () => void
 }
 
 const Separator = {
@@ -285,13 +295,15 @@ const contextMenuItems: Array<ContextMenuItem<ContextMenuItemsData>> = [
     enabled: (data) => data.openDataPicker != null,
     action: (data) => {
       data.openDataPicker?.()
+      data.hideContextMenu()
     },
   },
   {
     name: 'Remove',
     enabled: false,
     action: (data) => {
       data.deleteCartouche?.()
+      data.hideContextMenu()
     },
   },
   Separator,