MapControls doesn't work as expected

[GuskiS]

• three version: 0.126.1
• @react-three/fiber version: 6.0.0
• node version: 12.18.3
• npm (or yarn) version: 1.22.5
• browser version: chrome@latest/edge@latest

Problem description:

When visiting https://drei.pmnd.rs/?path=/story/controls-mapcontrols--map-controls-scene-st everything works as expected.

When I tried running drei's storybook locally, I get this:

CC: pmndrs/drei#351

[hasparus]

I have the same problem — after updating from react-three-fiber to @react-three/fiber orbit controls don't even respect enabled prop.

[joshuaellis]

Either of you are welcome to look and make a PR, will be fixed quicker that way.

[hasparus]

I'm looking for the cause right now. TBH I'm not sure if the problem originates from here.
I compared OrbitControls in three-stdlib and three/examples and didn't found anything suspicious.

I'm not sure what went wrong yet, just wanted to confirm that this problem is happening.

[hasparus]

Ha! Found the problem. It seems it's an issue with Drei's MapControls component.

I have two copies of MapControls. One accepts props given to MapControls from drei, the other one is created in drei's MapControls useState with default settings.

I commented out <primitive call, and I'm back to one.

This is connected to mrdoob/three.js#20575 and pmndrs/drei#169 as MapControls calls connect and registers event handlers, and we end up with side effects in useState (Does React guarantee it's called only once? I don't think so.)