fix top-bar extension render errors

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

docs/extensions/capabilities/common-capabilities.md

@@ -219,6 +219,34 @@ export default class ExampleExtension extends Renderer.LensExtension {
 
 ```
 
+### Top Bar Items
+
+This extension can register custom components to a top bar area.
+
+```typescript
+import React from "react";
+import { Renderer } from "@k8slens/extensions";
+
+const {
+  Component: {
+    Icon,
+  }
+} = Renderer;
+
+export default class ExampleExtension extends Renderer.LensExtension {
+  topBarItems = [
+    {
+      components: {
+        Item: (
+          <Icon material="favorite" onClick={() => this.navigate("/example-page" />
+        )
+      }
+    }
+  ]
+}
+
+```
+
 ### Status Bar Items
 
 This extension can register custom icons and text to a status bar area.

src/extensions/registries/topbar-registry.ts

@@ -23,7 +23,7 @@ import type React from "react";
 import { BaseRegistry } from "./base-registry";
 
 interface TopBarComponents {
-  Item?: React.ComponentType;
+  Item: React.ComponentType;
 }
 
 export interface TopBarRegistration {

src/renderer/components/layout/topbar.tsx

@@ -45,7 +45,7 @@ export const TopBar = observer(({ label, children, ...rest }: Props) => {
 
           return (
             <div key={index}>
-              {registration.components.Item}
+              <registration.components.Item />
             </div>
           );
         })}