fix: Added keys to fragments and other helper components

Author: b-zurg

src/components/Resizer/index.tsx

@@ -122,8 +122,9 @@ export const Resizer = ({
   ) : null;
 
   return (
-    <div style={{ position: 'relative' }}>
+    <div key="grabber.root" style={{ position: 'relative' }}>
       <ResizeGrabber
+        key="grabber"
         $isVertical={isVertical}
         $isCollapsed={isCollapsed}
         style={getWidthOrHeight(grabberSize)}
@@ -136,10 +137,10 @@ export const Resizer = ({
       >
         {collapseButton}
       </ResizeGrabber>
-      <Fade in={!isHovered}>
+      <Fade key="resize.presentation.fadein" in={!isHovered}>
         <ResizePresentation $isVertical={isVertical} style={{ ...getWidthOrHeight(1), ...css }} />
       </Fade>
-      <Fade in={isHovered}>
+      <Fade key="resize.presentation.fadeout" in={isHovered}>
         <ResizePresentation
           $isVertical={isVertical}
           style={{ ...getWidthOrHeight(1), ...hoverCss }}

src/components/SplitPane/index.tsx

@@ -84,7 +84,7 @@ export const SplitPane = ({ className = '', ...props }: SplitPaneProps) => {
   const entries = childPanes.map((pane, paneIndex) => {
     const resizerPaneIndex = isCollapseReversed ? paneIndex : paneIndex - 1;
     return (
-      <>
+      <React.Fragment key={paneIndex}>
         {paneIndex - 1 >= 0 ? (
           <Resizer
             key={`resizer.${resizerPaneIndex}`}
@@ -113,7 +113,7 @@ export const SplitPane = ({ className = '', ...props }: SplitPaneProps) => {
         >
           {pane.node}
         </Pane>
-      </>
+      </React.Fragment>
     );
   });
 
@@ -124,3 +124,4 @@ export const SplitPane = ({ className = '', ...props }: SplitPaneProps) => {
   );
 };
 SplitPane.displayName = 'SplitPane';
+SplitPane.key = 'SplitPane';