Nested routing not working

import { A, Outlet } from "solid-start";

const CatLayout = () => {
    return (
        <>
            <A href="/cat">Cat</A>
            <A href="/cat/dog">Dog</A>
            <hr />
            <Outlet />
        </>
    );
};

export default CatLayout;

const Cat = () => {
    return <>Cat</>;
};

export default Cat;

const Dog = () => {
    return <>Dog</>;
};

export default Dog;