UI/install: fix metaHeader reactive

pkgs/clan-app/ui/src/workflows/Install/install.tsx

@@ -55,6 +55,16 @@ export const InstallModal = (props: InstallModalProps) => {
     { initialStep: props.initialStep || "init" },
   );
 
+  const MetaHeader = () => {
+    // @ts-expect-error some steps might not have
+    const HeaderComponent = () => stepper.currentStep()?.title;
+    return (
+      <Show when={HeaderComponent()}>
+        {(C) => <Dynamic component={C()} machineName={props.machineName} />}
+      </Show>
+    );
+  };
+
   return (
     <StepperProvider stepper={stepper}>
       <Modal
@@ -62,18 +72,9 @@ export const InstallModal = (props: InstallModalProps) => {
         onClose={() => {
           console.log("Install aborted");
         }}
-        metaHeader={() => {
+        // @ts-expect-error some steps might not have
-          // @ts-expect-error some steps might not have a title
+        metaHeader={stepper.currentStep()?.title ? <MetaHeader /> : undefined}
-          const HeaderComponent = stepper.currentStep()?.title;
+        // @ts-expect-error some steps might not have
-          return (
-            <Show when={HeaderComponent}>
-              {(C) => (
-                <Dynamic component={C()} machineName={props.machineName} />
-              )}
-            </Show>
-          );
-        }}
-        // @ts-expect-error some steps might not have this
         disablePadding={stepper.currentStep()?.isSplash}
       >
         {(ctx) => <InstallStepper />}