In react-three-fiber, is it possible to put text on each face of a geometry shape?

I am quite new to three.js and react-three-fiber. I want to create something like the provided link and add an onclick event listener when a word is clicked on

https://codesandbox.io/s/r3f-mirrors-tutorial-2-lbzcs?from-embed

This code however, is working only in sandbox and not in nextjs. I modified the imports and the TitleCopies function in the above code to

function TitleCopies({ layers }) {
    const vertices = useMemo(() => {
        const y = new THREE.IcosahedronGeometry(12).attributes.position.array    <---            
        return y
    }, [])

    return (
        <group name="titleCopies">
        {vertices.map((vertex, i) => (
            <Title name={'titleCopy-' + i} position={vertex} layers={layers} />
        ))}
        </group>
    )
}

This just shows a blank black page without any errors. Any ideas on how to fix this?

Any input is greatly appreciated.