Decal Geometry on instanced mesh not showing up even if renderorder and depthtest are set

I have an instanced mesh set up as follows:

const instancedGeometry = new THREE.BoxGeometry(1,1,1);

const instancedMaterial = new THREE.MeshBasicMaterial({ color: new THREE.Color(0xff0000) });
const instancedMesh = new THREE.InstancedMesh( instancedGeometry, instancedMaterial, randomPoints );

I have a raycaster set up and I want to basically apply a decal on whichever is being clicked with the mouse. The raycast set up is standard and the intersection code is as follows:

document.addEventListener('pointerdown', (e) => {
    const windowX = e.clientX;
    const windowY = e.clientY;
    const ndcX = ((windowX / window.innerWidth) * 2) - 1;
    const ndcY = -((windowY / window.innerHeight) * 2) + 1;

     raycaster.setFromCamera(new THREE.Vector2(ndcX, ndcY), camera);
     const intersections = raycaster.intersectObjects(scene.children);
    if (intersections.length) {
    // get the first object you intersect with
    const intersectedInstance = intersections[0];
    const { normal, object, point, instanceId } = intersectedInstance;
    // get the instance transformation matrix 
    const instanceMatrix = new THREE.Matrix4();
    instancedMesh.getMatrixAt(instanceId, instanceMatrix);

    const worldInstanceMatrix = new THREE.Matrix4();
    worldInstanceMatrix.multiplyMatrices(instanceMatrix, instancedMesh.matrixWorld);

    const dummy = new THREE.Object3D();
    const n = normal.clone();
    n.transformDirection( worldInstanceMatrix );

    dummy.position.copy( point.clone() );
    dummy.lookAt( n );

    const  size = new THREE.Vector3( 1, 1, 0.1 );
    const decalGeometry = new DecalGeometry( object, point, dummy.rotation, size );
    const decal = new THREE.Mesh( decalGeometry, decalMaterial );



However, the decal geometry just will not show up. what am I doing wrong? Thanks in advance! The decal mesh gets created and on consoling scene.children, i do see the decal mesh added, but it just doesn’t become visible.