Event throws errors on shapeGeometry mesh with 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.