Layouts w/ Component Rendering please?!

import { Suspense } from 'solid-js'
import { MetaProvider } from '@solidjs/meta'
import { Router, Route, RouteSectionProps } from '@solidjs/router'


// pages
const SignIn = () => <div>sign up</div>
const SignUp = () => <div>sign up</div>
const Jazz = () => <div>jazz</div>


// layouts
const Guest = (props: RouteSectionProps) => <> <div>Guest</div> {props.children} </>
const Auth = (props: RouteSectionProps) => <> <div>Auth</div> {props.children} </>


export default () => <>
  <Router root={RootLayout}>
    <Route component={Guest}>
      <Route path="/sign-in" component={SignIn} />
      <Route path="/sign-up" component={SignUp} />
    </Route>
    <Route component={Auth}>
      <Route path="/jazz" component={Jazz} />
    </Route>
  </Router>
</>


function RootLayout (props: RouteSectionProps) {
  return <>
    <MetaProvider>
      <Suspense>{props.children}</Suspense>
    </MetaProvider>
  </>
}