"Maximum update depth exceeded" when changing values

[d3ttl4ff]

Hi! I'm trying to use leva on my react-three projects but it throws this error when i try to change a value.

Here's a simple code I did

import { useControls } from 'leva';

const Base = () => {
 const { position, scale, color } = useControls({
   position: { value: { x: -2, y: 0 }, step: 0.01, joystick: 'invertY' },
   scale: { value: 1, min: 0, max: 5, step: 0.001 },
   color: '#ff0000',
 });

 return (
   <>
     <mesh position={[position.x, position.y, 0]} scale={scale}>
       <sphereGeometry />
       <meshStandardMaterial color={color} />
     </mesh>

     <mesh position-x={2} scale={1.5}>
       <boxGeometry />
       <meshStandardMaterial color="mediumpurple" />
     </mesh>

     <mesh position-y={-1} rotation-x={-Math.PI * 0.5} scale={10}>
       <planeGeometry />
       <meshStandardMaterial color="greenyellow" />
     </mesh>
   </>
 );
};

export default Base;

In my case it only happens on the position value changes. Scale, Color are working fine without an error. But whenever I try to move the object using the tweaks it throws the error and starts to lag with a significant framerate drop. Does anyone know why this is happening and any possible fixes?