Dynamic Component is not working

import { Dynamic, render } from "solid-js/web";
import {  createEffect, createSignal } from "solid-js";

export const StepperLayout = (props) => {
  console.log('QWEQWEQWEQE');

  return <>STEP LAYOUT {props?.children}</>;
};

export const AppLayout = (props) => {
  return <>APP LAYOUT {props?.children}</>;
};


const LayoutHome = (props: { children; currentStep?: string }) => {
  const [layout, setLayout] = createSignal(AppLayout);

  createEffect(() => {
    if (props.currentStep?.startsWith('STEP')) {
      setLayout(StepperLayout);
    }
  });

  createEffect(() => {
    console.log(layout(), AppLayout);
  });

  return <Dynamic component={layout()}>{props.children}</Dynamic>;
};

function Counter() {
  const [count, setCount] = createSignal(1);
  const increment = () => setCount(count() + 1);

  return (
    <button type="button" onClick={increment}>
      {count()}
    </button>
  );
}

render(() => <><LayoutHome currentStep="STEP">toto</LayoutHome></>, document.getElementById("app")!);