Codesandbox to reproduce: https://codesandbox.io/p/sandbox/react-three-fiber-forked-8tqxgj?file=%2Fsrc%2Fcomponents%2FBox.jsx%3A1%2C1-23%2C1

• three version: 0.170.0
• @react-three/fiber version: 8.17.10
• @react-three/drei version: 9.117.0
• node version: n/a
• npm (or yarn) version: n/a

Problem description:

TransformControls don't work when you call setState in useFrame, including both react and zustand setters.

Hovering over the transform controls results in flickering, and they aren't draggable.

Relevant code:

import React from "react";
import { useState } from "react";
import { useFrame } from "@react-three/fiber";

import { TransformControls } from "@react-three/drei";

const Box = () => {
  const [state, setState] = useState();
  useFrame(() => {
    setState(Date.now());
  });
  return (
    <TransformControls mode="translate" translationSnap={0.5}>
      <mesh position={[0, 1, 0]}>
        <boxGeometry attach="geometry" />
        <meshBasicMaterial attach="material" wireframe="true" color="hotpink" />
      </mesh>
    </TransformControls>
  );
};

Suggested solution:

This should(?) work out of the box? Removing the setState causes it to work, but that is not an acceptable solution.

I note this does work if you move the useFrame() to the Plane.js component in the scene above - aka if it's in a sibling component.

This does not work if the parent component of the one containing the <TransformControls /> contains the useFrame/setState.

This also does not work if you add a key={0} prop to the TransformControls, which I tried to see if it's from mounting/unmounting.