Ensuring thin instanced meshes are always visible in Three.js

I am creating a heatmap with Three.js that has 19 rows and ~6,000 columns. Since there are so many columns, each cell is very thin. Out of the >110,000 cells in my current dataset, 47 are colored red, which are especially of interest. Most of these cells are visible, but there are 3 that are completely invisible until you zoom in or apply some animation that makes them larger (they disappear again when zooming out or return them to their original size).

The cells are generated using 3 instanced meshes,

const cellWidth = width / nCols;
const apparentCellWidth = cellWidth*1.01;
const cellHeight = height / nRows;

const cellGeometry = new THREE.PlaneGeometry(apparentCellWidth, cellHeight);

const redMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const greyMaterial = new THREE.MeshBasicMaterial({ color: 0xc7c8c9 });
const whiteMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });

let redMesh = new THREE.InstancedMesh(cellGeometry, redMaterial, redCount);
let greyMesh = new THREE.InstancedMesh(cellGeometry, greyMaterial, greyCount);
let whiteMesh = new THREE.InstancedMesh(cellGeometry, whiteMaterial, whiteCount);



const heatmapGroup = new THREE.Group();
heatmapGroup.add(redMesh);
heatmapGroup.add(greyMesh);
heatmapGroup.add(whiteMesh);

scene.add(heatmapGroup);

Is there a way to give the redMesh preferential treatment such that it will always be shown?

I have already tried the following to no avail

redMesh.renderOrder = 999;
redMesh.material.depthTest = false;
redMesh.material.depthWrite = false;
redMesh.onBeforeRender = function (renderer) { renderer.clearDepth(); };

Previously I had an issue where there were vertical gaps in between some columns. My solution to this was to calculate the positions of the cells using cellWidth, but to draw them with a width that is 1% wider apparentCellWidth. I suspect these issues could be related to one another.