fix bugs

Author: AlemTuzlak

packages/react-router-devtools/src/client/hooks/useTabs.ts

@@ -13,7 +13,10 @@ export const useTabs = () => {
 
 	const { Component, hideTimeline } = useMemo(() => {
 		const tab = allTabs.find((tab) => tab.id === activeTab)
-		return { Component: tab?.component, hideTimeline: shouldHideTimeline(tab) }
+		return {
+			Component: tab?.component,
+			hideTimeline: shouldHideTimeline(tab),
+		}
 	}, [activeTab, allTabs])
 
 	return {

packages/react-router-devtools/src/client/layout/ContentPanel.tsx

@@ -16,7 +16,7 @@ const ContentPanel = () => {
 					activeTab === "page" && styles.layout.contentPanel.mainContentPageTab
 				)}
 			>
-				{Component}
+				{Component && <Component />}
 			</div>
 
 			{!hideTimeline && (

packages/react-router-devtools/src/client/tabs/index.tsx

@@ -1,4 +1,4 @@
-import type { JSX } from "react"
+import type { ComponentType, JSX } from "react"
 import { Icon } from "../components/icon/Icon.js"
 import { NetworkTab } from "./NetworkTab.js"
 import { PageTab } from "./PageTab.js"
@@ -10,7 +10,7 @@ export interface Tab {
 	name: string | JSX.Element
 	icon: JSX.Element
 	id: string
-	component: JSX.Element
+	component: ComponentType
 	hideTimeline: boolean
 }
 
@@ -19,21 +19,21 @@ export const tabs = [
 		name: "Active page",
 		icon: <Icon size="md" name="Layers" />,
 		id: "page",
-		component: <PageTab />,
+		component: PageTab,
 		hideTimeline: false,
 	},
 	{
 		name: "Routes",
 		icon: <Icon size="md" name="GitMerge" />,
 		id: "routes",
-		component: <RoutesTab />,
+		component: RoutesTab,
 		hideTimeline: false,
 	},
 	{
 		name: "Network",
 		icon: <Icon size="md" name="Network" />,
 		id: "network",
-		component: <NetworkTab />,
+		component: NetworkTab,
 
 		hideTimeline: true,
 	},