Passing signal value as a prop

import { JSX } from 'solid-js';
import styles from '../title/Title.module.css';
import { Dynamic } from 'solid-js/web';

export default function Title({
    element,
    children,
}: {
    element: keyof JSX.IntrinsicElements;
    children: any;
}) {
    return (
        <Dynamic component={element}>
            {children}
        </Dynamic>
    );
}

const [project, setProject] = createSignal(0);

    onMount(() => {
        const interval = setInterval(() => {
            setProject((value) => (projects.length - 1 === value ? 0 : value + 1));
        }, 1000);
        return () => clearInterval(interval);
    });

    return (
        <section id='projects' class={styles.projects}>
            <Title color='primary' size='large' element='h3'>
                My Projects
            </Title>
            <div class={styles.list}>
                <ArrowLeft />
                <div class={styles.project_container}>
                    <img src={projects[project()].image} />
                    <div class={styles.hr}>
                        <hr />
                    </div>
                    <div class={styles.project_description}>
                        <Title color='primary' size='small' element='h4'>
                            {projects[project()].name}
                        </Title>
                        <p class={styles.paragraph}>{projects[project()].description}</p>
                    </div>
                </div>
                <ArrowRight />
            </div>
        </section>
    );