JSFiddle - React, Tailwind, and code Playground

HTML

<script type="x-shader/x-vertex" id="vertexshader">
			varying vec2 vUv;
			void main() {
				vUv = uv;
				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
			}
</script>
<script type="x-shader/x-fragment" id="fragmentshader">
			uniform sampler2D baseTexture;
			uniform sampler2D bloomTexture;
			varying vec2 vUv;
			vec4 getTexture( sampler2D texelToLinearTexture ) {
				return mapTexelToLinear( texture2D( texelToLinearTexture , vUv ) );
			}
			void main() {
				gl_FragColor = ( getTexture( baseTexture ) + vec4( 1.0 ) * getTexture( bloomTexture ) );
			}
</script>

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/MaskPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://threejs.org/examples/js/shaders/CopyShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/FXAAShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/ConvolutionShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/LuminosityHighPassShader.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/UnrealBloomPass.js"></script>


<div class="bg">
  <div class="canvas">
  
  </div>
</div>

CSS

body {
	  margin: 0;
}

html {
  height: 100%;
  width: 100%;
}

.canvas {
  width: 500px;
  height: 500px;
}

body {
background-color: #923cb5;
background-image: linear-gradient(147deg, #923cb5 0%, #000000 74%);
}

JavaScript

var camera, scene, renderer, canvas
var geometry, material, mesh

init()

function init() {
		
		canvas = document.querySelector('.canvas')
    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 )
    camera.position.z = 1

    scene = new THREE.Scene()

    geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 )
    material = new THREE.MeshNormalMaterial()

    mesh = new THREE.Mesh( geometry, material )
    scene.add( mesh )

    renderer = new THREE.WebGLRenderer( { alpha: true, antialias: true } )
    
    canvas.appendChild( renderer.domElement )
    
    // Custom
    const bloomLayer = new THREE.Layers(),
      width = canvas.clientWidth,
      height = canvas.clientHeight,
      params = {
        exposure: 1,
        bloomStrength: 1,
        bloomThreshold: 0,
        bloomRadius: 0,
        scene: 'Scene with Glow',
      },
      ENTIRE_SCENE = 0,
      BLOOM_SCENE = 1,
      darkMaterial = new THREE.MeshBasicMaterial({ color: 'black' }),
      materials = {},
      renderScene = new THREE.RenderPass(scene, camera),
      bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(width, height), 1.5, 0.4, 0.85),
      bloomComposer = new THREE.EffectComposer(renderer),
      finalPass = new THREE.ShaderPass(
        new THREE.ShaderMaterial({
          uniforms: {
            baseTexture: { value: null },
            bloomTexture: { value: bloomComposer.renderTarget2.texture },
          },
          vertexShader: document.getElementById('vertexshader').textContent,
          fragmentShader: document.getElementById('fragmentshader').textContent,
          defines: {},
        }), 'baseTexture',
      ),
      finalComposer = new THREE.EffectComposer(renderer)

    
    bloomPass.threshold = params.bloomThreshold
    bloomPass.strength = params.bloomStrength
    bloomPass.radius = params.bloomRadius
    bloomComposer.renderToScreen = true
    // If this is set to false it works but background goes black
    //...