chore(compass-workspaces): fix for sidebar getting remounted on every render (#5907)

Author: himanshusinghs

packages/compass-workspaces/src/components/index.tsx

@@ -116,17 +116,15 @@ const WorkspacesWithSidebar: React.FunctionComponent<
           darkMode ? containerDarkThemeStyles : containerLightThemeStyles
         )}
       >
-        <div className={sidebarStyles}>
-          {renderSidebar && React.createElement(renderSidebar)}
-        </div>
+        <div className={sidebarStyles}>{renderSidebar?.()}</div>
         <div className={workspacesStyles}>
           <Workspaces
             singleConnectionConnectionInfo={singleConnectionConnectionInfo}
             openOnEmptyWorkspace={openOnEmptyWorkspace}
           ></Workspaces>
         </div>
       </div>
-      {renderModals && React.createElement(renderModals)}
+      {renderModals?.()}
     </WorkspacesServiceProvider>
   );
 };

packages/compass-workspaces/src/index.spec.tsx

@@ -46,6 +46,10 @@ describe('WorkspacesPlugin', function () {
   const onTabChangeSpy = sandbox.spy();
 
   function renderPlugin() {
+    const Modals: React.FC = () => {
+      openFns = useOpenWorkspace();
+      return null;
+    };
     return render(
       <WorkspacesProvider
         value={[
@@ -60,8 +64,7 @@ describe('WorkspacesPlugin', function () {
         <Plugin
           onActiveWorkspaceTabChange={onTabChangeSpy}
           renderModals={() => {
-            openFns = useOpenWorkspace();
-            return null;
+            return <Modals />;
           }}
         ></Plugin>
       </WorkspacesProvider>