通过道具反应禁用三纤维

Question

我有一个使用react-three-fiber创建的场景，该场景使用EffectsComposer npm包具有Glitch的效果，具有react-postprocessing的效果。

我想使用html input复选框切换active效果的Glitch状态，但是，切换active道具的状态不会禁用该效果。禁用复选框输入效果的正确方法是什么？

我已经在此处设置了一个沙盒 https://codesandbox.io/s/tender-star-lw07h?file=/src/App.tsx:0-1488

这是代码。

import React, {
  Suspense,
  useRef,
  useEffect,
  useState,
  createRef,
  Fragment
} from "react";
import Outline from "./components/Outline";
import { EffectComposer, Glitch, Noise } from "react-postprocessing";
import { Canvas } from "react-three-fiber";
import { OrbitControls } from "drei";
import { Mesh } from "three";
import { GlitchMode } from "postprocessing";

const Box = (props: any) => (
  <mesh {...props}>
    <meshBasicMaterial attach="material" color="red" />
    <boxGeometry args={[1, 1, 1]} attach="geometry" />
  </mesh>
);

const Composer = ({ active }: any) => {
  const ref = React.useRef();

  return (
    <EffectComposer>
      <Glitch ref={ref} active={active} mode={GlitchMode.CONSTANT_WILD} />
    </EffectComposer>
  );
};

const App = () => {
  const ref = useRef();

  const [selection, select] = useState<Mesh>();
  const [active, activate] = useState<boolean>(true);

  useEffect(() => {
    if (selection) {
      console.log(ref.current);
    }
  }, [selection]);

  return (
    <Fragment>
      <div style={{ background: "#fff" }}>
        <label htmlFor="">Active {JSON.stringify(active)}</label>
        <input
          type="checkbox"
          defaultChecked={active}
          onChange={($event) => {
            activate($event.target.checked);
          }}
        />
      </div>
      <Canvas>
        <Box onClick={(mesh) => select(mesh)} />
        <Composer active={active} />
      </Canvas>
    </Fragment>
  );
};