import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import {
EffectComposer,
RenderPass,
CopyPass,
} from "postprocessing";

const renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true,
});
renderer.setSize(window.innerWidth, window.innerHeight);

const container = document.getElementById("app");
// @ts-ignore
container.append(renderer.domElement);

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
60,
window.innerWidth / window.innerHeight,
0.1,
1000
);

const composer = new EffectComposer(renderer);
let renderPass = new RenderPass(scene, camera)
composer.addPass(renderPass);
const copyPass = new CopyPass();
composer.addPass(copyPass);

setInterval(() => {
copyPass.enabled = !copyPass.enabled;

renderPass.renderToScreen = !copyPass.enabled
copyPass.renderToScreen = copyPass.enabled
}, 2000 )

const orbit = new OrbitControls(camera, renderer.domElement);
camera.position.set(10, 15, -22);
orbit.update();

const material = new THREE.MeshStandardMaterial({
roughness: 0.95,
color: new THREE.Color("#2aad2a"),
});
const planeMesh = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), material);
planeMesh.rotateX(-Math.PI / 2);
scene.add(planeMesh);

const light = new THREE.AmbientLight(0xffffff);
scene.add(light);

const size = 10;
const divisions = 10;
const gridHelper = new THREE.GridHelper(size, divisions);
scene.add(gridHelper);

function animate(time) {
requestAnimationFrame(animate);
composer.render(time);
}

animate();

window.addEventListener("resize", function () {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});

when
copyPass.enabled = true

copyPass.enabled = false

when copyPass.enabled = true, How to set it to maintain its original state？Thanks