I want to apply this style to a sibling div container mix-blend-color-burn. However, I've just noticed that the canvas is being wrapped within 2 div containers:

<div> <!-- Wrapper 1 -->
  <div> <!-- Wrapper 2 -->
    <canvas></canvas> <!-- R3F canvas -->
  </div>
</div>

Which cause the effect to not work at all.

main component:

<div className="w-full h-full">
      <CanvasWorld />
      <div
        className="mix-blend-color-burn  absolute z-10 inset-0  
        flex justify-center items-center
      pointer-events-none "
      >
        <h1 className="mix-blend-color-burn text-[#252525] font-bold">
          Avid Software Engineer with +3 years of experience
        </h1>
      </div>
    </div>

The canvasworld component:

<div className="h-screen w-full webgl-world relative bg-transparent">
  <Canvas className="block">
    {/* <color attach={"background"} args={["red"]} /> */}
    <CameraControls makeDefault />
    <mesh>
      <boxGeometry />
      <meshBasicMaterial />
    </mesh>
  </Canvas>
</div>