Improve ReactDevToolsOverlay usability (#55387)

Summary:
Pull Request resolved: #55387

The components selector on desktop has a couple of issues:
- Closest public handle is very frequently null (no matching component in the React tree) meaning that nothing gets selected. Ideally we should select the closest parent.
- After any selection is made, the inspector is turned off. This combined with the above problem causes the inspector to look like it fails in the vast majority of cases.

For now, let's disable the behavior of toggling off the inspector when something is selected, and instead require the user to manually disable the component selector.

This also changes the behavior of the overlay for all other platforms. I do think this is better UX (I've had similar issues to this on mobile.) Ultimately we should improve the component selector to be as good as the one in Inspector.js, but this seems like a good stop-gap for now.

Changelog: [Internal]

Reviewed By: yannickl, shwanton

Differential Revision: D91913370

fbshipit-source-id: c676c4be78eebea54003a40d7cc23876f7a6b67e

Author: sbuggay

packages/react-native/src/private/devsupport/devmenu/elementinspector/ReactDevToolsOverlay.js

@@ -52,10 +52,12 @@ export default function ReactDevToolsOverlay({
 
     function onStartInspectingNative() {
       setIsInspecting(true);
+      setInspected(null);
     }
 
     function onStopInspectingNative() {
       setIsInspecting(false);
+      setInspected(null);
     }
 
     reactDevToolsAgent.addListener('shutdown', cleanup);
@@ -93,12 +95,6 @@ export default function ReactDevToolsOverlay({
     [inspectedViewRef, reactDevToolsAgent],
   );
 
-  const stopInspecting = useCallback(() => {
-    reactDevToolsAgent.stopInspectingNative(true);
-    setIsInspecting(false);
-    setInspected(null);
-  }, [reactDevToolsAgent]);
-
   const onPointerMove = useCallback(
     (e: PointerEvent) => {
       findViewForLocation(e.nativeEvent.x, e.nativeEvent.y);
@@ -133,12 +129,10 @@ export default function ReactDevToolsOverlay({
         ? {
             onPointerMove,
             onPointerDown: onPointerMove,
-            onPointerUp: stopInspecting,
           }
         : {
             onStartShouldSetResponder: shouldSetResponder,
             onResponderMove: onResponderMove,
-            onResponderRelease: stopInspecting,
           };
 
     return (