Bloom refs with TypeScript

[penx]

With the following code:

import type { BloomEffect } from "postprocessing";

import { useFrame } from "@react-three/fiber";
import { Bloom } from "@react-three/postprocessing";
import { useRef } from "react";

const MyBloom = () => {
  const bloom = useRef<typeof BloomEffect | null>(null);
  useFrame((state, delta) => {
    bloom.current.intensity = 2;
  });
  return <Bloom ref={bloom} />
}

I get the following error:

Property 'intensity' does not exist on type 'typeof BloomEffect'.

The code works though - am I doing something wrong or is there an issue with the types?

[penx]

One way the above doesn't work - if I combine it with leva:

  const controls = useControls({
    bloomRadius: { value: 0.4, min: 0, max: 1, step: 0.01 },
  });

When I set something in leva, neither the useFrame or the leva control values update the Bloom.