fix(studio): Duplicate keys in NamespaceTree

theatre/studio/src/panels/OutlinePanel/ObjectsList/ObjectsList.tsx

@@ -40,10 +40,11 @@ function NamespaceTree(props: {
     <>
       {[...props.namespace.entries()].map(([label, {object, nested}]) => {
         const children = (
-          <>
+          <React.Fragment key={`${label} - ${props.visualIndentation}`}>
             {object && (
               <ObjectItem
                 depth={props.visualIndentation}
+                // key is useful for navigating react dev component tree
                 key={'objectPath(' + object.address.objectKey + ')'}
                 // object entries should not allow this to be undefined
                 sheetObject={object}
@@ -53,16 +54,20 @@ function NamespaceTree(props: {
             {nested && (
               <NamespaceTree
                 namespace={nested}
+                // Question: will there be key conflict if two components have the same labels?
+                key={'namespaceTree(' + label + ')'}
                 visualIndentation={props.visualIndentation + 1}
               />
             )}
-          </>
+          </React.Fragment>
         )
 
         return nested ? (
           <BaseItem
             selectionStatus="not-selectable"
             label={label}
+            // key necessary for no duplicate keys (next to other React.Fragments)
+            key={`baseItem(${label})`}
             depth={props.visualIndentation}
             children={children}
           />