Dynamically returning select child doesn't work

import { createEffect, createSignal, children} from "solid-js"

export default function CarouselInner(props) {
    const c = children(() => props.children)
    const [activePage, setActivePage] = createSignal(0)
    if (!Array.isArray(props.children) || props.children.length < 1) throw new Error("Please supply a list of child elements to iterate across")

    const previousPage = ()=>{
        let destinationPage = activePage() - 1
        while (destinationPage < 0) destinationPage += props.children.length
        setActivePage(destinationPage)
    }
    const nextPage = ()=>{
        setActivePage((activePage() + 1) % props.children.length)
    }

    createEffect(()=>{
        console.log(activePage())
    })
    
    return <>   
        {c()[activePage()]}
        <button onClick={previousPage}>Previous</button>
        <button onClick={nextPage}>Next</button>
    </>
}