How do I give random rotation to boxes positioned arbitrarily using a map function? I tried rotateY/X = { Math.random() * Math.Pi }

Question

I'm trying to add 500 boxes to the scene, each box is positioned, scaled, and rotated arbitrarily, using @react-three/fiber. struggling with rotation, nothing happens when I set rotateY/X = { Math.random() * Math.Pi }. However, I was able to scale them randomly using the same approach. Also, the map function is also working to position the boxes

function createPositions() {
  let positions = []
  for (var i = 0; i < 100; i++) {
    var x = (Math.random() - 0.5) * 30
    var y = (Math.random() - 0.5) * 30
    var z = (Math.random() - 0.5) * 30
    positions[i] =  [x, y, z] 
  }
  return positions
}
const positions = createPositions()

function Hero() {
  return (
    <Canvas style={{ height: "100vh", width: "100%" }}>
      <perspectiveCamera
        fov={75}
        aspect={sizes.width / sizes.height}
        near={0.1}
        far={100}
        position={[0, 0, 3]}
      />
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      {positions.map((position, i) => (
        <Box key={i} position={position}  />
      ))}
      <Controls />
    </Canvas>
  )
}

const Box = ({position}) => {
  var mesh = useRef()
  return (
    <mesh
      ref={mesh}
      position={position}
      rotateX={Math.random()*Math.Pi} //thought it would work like it did for scale
      rotateY={Math.random()*Math.Pi}
      scale={Math.random()}
    >
      <boxBufferGeometry attach="geometry" args={[1, 1, 1]} />
      <meshNormalMaterial />
    </mesh>
  )
}