"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?