Prepare for next React Native sync with new instance format (v2)

Summary:
We made some changes to the new instance format, so need to adapt this again after D43980374.

The previous format was never synced so we don't need to keep compatibility.

Changelog: [internal]

Reviewed By: javache

Differential Revision: D44137324

fbshipit-source-id: bb08141674e2385934772f241acb863f9050b671

Author: rubennorte

packages/react-native/Libraries/Components/TraceUpdateOverlay/TraceUpdateOverlay.js

@@ -33,10 +33,7 @@ interface Agent {
   removeListener(event: $Keys<AgentEvents>, listener: () => void): void;
 }
 
-type TraceNode = {
-  publicInstance?: TraceNode,
-  // TODO: remove this field when syncing the new version of the renderer from React to React Native.
-  canonical?: TraceNode,
+type PublicInstance = {
   measure?: (
     (
       x: number,
@@ -49,6 +46,16 @@ type TraceNode = {
   ) => void,
 };
 
+type TraceNode =
+  | PublicInstance
+  | {
+      canonical?:
+        | PublicInstance // TODO: remove this variant when syncing the new version of the renderer from React to React Native.
+        | {
+            publicInstance?: PublicInstance,
+          },
+    };
+
 type ReactDevToolsGlobalHook = {
   on: (eventName: string, (agent: Agent) => void) => void,
   off: (eventName: string, (agent: Agent) => void) => void,
@@ -102,11 +109,14 @@ export default function TraceUpdateOverlay(): React.Node {
 
       const newFramesToDraw: Array<Promise<Overlay>> = [];
       nodesToDraw.forEach(({node, color}) => {
-        // `publicInstance` => Fabric
+        // `canonical.publicInstance` => Fabric
         // TODO: remove this check when syncing the new version of the renderer from React to React Native.
         // `canonical` => Legacy Fabric
         // `node` => Legacy renderer
-        const component = node.publicInstance ?? node.canonical ?? node;
+        const component =
+          (node.canonical && node.canonical.publicInstance) ??
+          node.canonical ??
+          node;
         if (!component || !component.measure) {
           return;
         }

packages/react-native/Libraries/Inspector/DevtoolsOverlay.js

@@ -52,11 +52,14 @@ export default function DevtoolsOverlay({
     function onAgentShowNativeHighlight(node: any) {
       clearTimeout(hideTimeoutId);
 
-      // `publicInstance` => Fabric
-      // TODO: remove this check when syncing the new version of the renderer from React to React Native.
+      // `canonical.publicInstance` => Fabric
       // `canonical` => Legacy Fabric
       // `node` => Legacy renderer
-      const component = node.publicInstance ?? node.canonical ?? node;
+      const component =
+        (node.canonical && node.canonical.publicInstance) ??
+        // TODO: remove this check when syncing the new version of the renderer from React to React Native.
+        node.canonical ??
+        node;
       if (!component || !component.measure) {
         return;
       }