Infinite canvas re-render when using @react-three/postprocessing

[dkoziatynskyi]

I am using @react-three/postprocessing to add Outline to a couple of meshes using <Select />, but whenever at least one Select tag is enabled, it causes the whole Canvas to infinitely re-render starting from <App /> tag (with all its hooks etc).

Sandbox: https://codesandbox.io/p/devbox/nice-sea-forked-zcl7qk?workspaceId=ws_GaAtBYTSs6xV1m4c6jiSMt

Here is the outlined component:

import type { Mesh, MeshStandardMaterial } from 'three';
import type { GLTF } from 'three-stdlib';
import { useGLTF } from '@react-three/drei';
import { Select } from '@react-three/postprocessing';

import pcModelURL from '@/assets/models/new/room_pc.glb?url';

type GLTFResult = GLTF & {
  nodes: {
    PC: Mesh
  }
  materials: {
    Material: MeshStandardMaterial
  }
}

export default function PC() {
  const { nodes, materials } = useGLTF(pcModelURL) as GLTFResult;

  return (
    <Select enabled={true}>
      <group dispose={null}>
        <mesh
          name="PC"
          castShadow
          receiveShadow
          geometry={nodes.PC.geometry}
          material={materials.Material}
          position={[0.636, -0.812, -1.276]}
        />
      </group>
    </Select>
  );
}

useGLTF.preload(pcModelURL);

Effect composer:

import { useThree } from '@react-three/fiber';
import { EffectComposer, Outline } from '@react-three/postprocessing'

export default function Effects() {
  const { size } = useThree();

  return (
    <EffectComposer stencilBuffer enableNormalPass={false} autoClear={false} multisampling={4}>
      <Outline visibleEdgeColor={0xffffff} hiddenEdgeColor={0xffffff} blur width={size.width * 1.25} edgeStrength={10} />
    </EffectComposer>
  );
}

And the <Selection> wrapper:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { PCFSoftShadowMap } from 'three';
import { Canvas } from '@react-three/fiber';
import { CameraControls, PerspectiveCamera, Bvh } from '@react-three/drei';
import { Selection } from '@react-three/postprocessing';

import PC from './components/PC';

const aspect = window.innerWidth / window.innerHeight;

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <div className="CanvasWrapper">
      <Canvas
        shadows={{ type: PCFSoftShadowMap }}
        gl={{
          antialias: true,
          localClippingEnabled: true,
        }}
      >
        <Bvh firstHitOnly>
          <CameraControls
            makeDefault
            verticalDragToForward={false}
            dollyToCursor={false}
            infinityDolly={false}
            maxDistance={50}
            maxAzimuthAngle={0}
            minAzimuthAngle={-1.8}
            minPolarAngle={Math.PI / 6}
            maxPolarAngle={Math.PI / 2}
          />
          <PerspectiveCamera
            makeDefault
            fov={20}
            aspect={aspect}
            near={0.35}
            far={150}
            position={[-10, 5, 25]}
          />
          <Selection>
            <PC />
            <Effects />
          </Selection>
        </Bvh>
      </Canvas>
    </div>
  </StrictMode>
);

Would really appreciate any help!