Bloom effect not working on Html from drei

Questions
1 
<Html
    as='div'
    center
    position={[0,0,0]}
    distanceFactor={7}
    transform
    onOcclude={(visible) => null}

  >
    <Form/>
  </Html>
}

and effect composer

export default function Effects() {
  const composer = useRef()
  const { scene, gl, size, camera } = useThree()
  const aspect = useMemo(() => new THREE.Vector2(512, 512), [])
  useEffect(() => void composer.current.setSize(size.width, size.height), [size])
  useFrame(() => composer.current.render(), 1)
  return (
    <effectComposer ref={composer} args={[gl]}>
      <renderPass attachArray="passes" scene={scene} camera={camera} />
      <sSAOPass attachArray="passes" args={[scene, camera, 1024, 1024]} kernelRadius={0.8} maxDistance={0.4} />
      <unrealBloomPass attachArray="passes" args={[aspect, 2, 1, 0]} />
      <shaderPass attachArray="passes" args={[FXAAShader]} material-uniforms-resolution-value={[1 / size.width, 1 / size.height]} />
    </effectComposer>
  )
}

Bloom works for the entire scene except Html. How to fix it?