Event throws errors on shapeGeometry mesh with react-three-fiber - react-three-fiber

Question

I was doing some experimenting with react-three-fiber, I took the sample code from react-three-fiber and added some code to create a plane with rounded edges.
When I add an event to the plane with the roundend edges and try to trigger the event the browser throws an error:
error , is there something I'm doing wrong that I'm not seeing?
import ReactDOM from 'react-dom'
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from '#react-three/fiber'
import * as THREE from 'three';
function RoundedRect(width,height,radius){
const roundedRectShape = new THREE.Shape();
roundedRectShape.moveTo( -(width/2), -(height/2) + radius );
roundedRectShape.lineTo( -(width/2), (height/2) - radius );
roundedRectShape.quadraticCurveTo( -(width/2), (height/2), -(width/2) + radius, (height/2) );
roundedRectShape.lineTo( (width/2) - radius, (height/2) );
roundedRectShape.quadraticCurveTo( (width/2), (height/2), (width/2), (height/2) - radius );
roundedRectShape.lineTo( (width/2), -(height/2) + radius );
roundedRectShape.quadraticCurveTo( (width/2), -(height/2), (width/2) - radius, -(height/2) );
roundedRectShape.lineTo( -(width/2) + radius, -(height/2) );
roundedRectShape.quadraticCurveTo( -(width/2), -(height/2), -(width/2) , -(height/2) + radius );
return roundedRectShape
}
function Temp(props){
// This reference will give us direct access to the mesh
const mesh = useRef()
// Set up state for the hovered and active state
const [hovered, setHover] = useState(false)
const [active, setActive] = useState(1)
// Subscribe this component to the render-loop, rotate the mesh every frame
useFrame((state, delta) => (mesh.current.rotation.y += delta))
// Return view, these are regular three.js elements expressed in JSX
return (
<mesh
{...props}
ref={mesh}
scale={active}
onClick={(event) => setActive(active+0.1)}
onPointerOver={(event) => setHover(true)}
onPointerOut={(event) => setHover(false)}
>
<shapeGeometry args={RoundedRect(1,1,0.2)}/>
<meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
</mesh>
)
}
function Box(props) {
// This reference will give us direct access to the mesh
const mesh = useRef()
// Set up state for the hovered and active state
const [hovered, setHover] = useState(false)
const [active, setActive] = useState(1)
// Subscribe this component to the render-loop, rotate the mesh every frame
useFrame((state, delta) => (mesh.current.rotation.y += delta))
// Return view, these are regular three.js elements expressed in JSX
return (
<mesh
{...props}
ref={mesh}
scale={active}
onClick={(event) => setActive(active+0.1)}
onPointerOver={(event) => setHover(true)}
onPointerOut={(event) => setHover(false)}
>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
</mesh>
)
}
ReactDOM.render(
<Canvas style={{height:'100%',width:'100%'}}>
<ambientLight />
<pointLight position={[10, 10, 10]} />
<Box position={[-1.2, 0, 0]} />
<Temp position={[1.2, 0, 0]} />
</Canvas>,
document.getElementById('root')
)

Answer 1

I found the solution: in the 'args' from the shapeGeometry I use args={RoundedRect(1,1,0.2)} and I need to use args={[RoundedRect(1,1,0.2)]} (see square brackets) , the strange thing is that the code works fine without events.