Geoserver terrain provider display spikes and cut image

Hi guys,
im playing around with cesiumjs and geoserver.
i followed the readme from this repo GitHub - kaktus40/Cesium-GeoserverTerrainProvider: plug in to use geoserver as terrain provider
and able to serve data from geoserver to cesium, the only problem im getting is a spikes edges in the image and black gaps between tiles… can see in this image

i used this site https://srtm.csi.cgiar.org/ to download a srtm data.

made a pyramid from it using gdal_relite.py, uploaded it using the imagePyramid plugin.
also i add the bil plugin for geoserver and made the default encoding to be application/bil16.

sample of the code im using
const terrainProvider = new Cesium.GeoserverTerrainProvider({
service: ‘WMS’,
url: ‘http://localhost:8080/geoserver/elevation/wms’,
layerName: ‘newp’,
xml: ‘http://localhost:8080/geoserver/elevation/wms?SERVICE=WMS&REQUEST=GetCapabilities&tiled=true’,
heightMapWidth: 64,
heightMapHeight: 64,
offset: 0,
highest: 12000,
lowest: -500,
hasStyledImage: false,
waterMask: false,
maxLevel: 11,
formatImage: { format: ‘image/png’, extension: ‘png’ },
formatArray: {
format: ‘image/bil’,
postProcessArray: function (bufferIn, size, highest, lowest, offset) {
var resultat;
var viewerIn = new DataView(bufferIn);
var littleEndianBuffer = new ArrayBuffer(size.height * size.width * 2);
var viewerOut = new DataView(littleEndianBuffer);
if (littleEndianBuffer.byteLength === bufferIn.byteLength) {
// time to switch bytes!!
var temp,
goodCell = 0,
somme = 0;
for (var i = 0; i < littleEndianBuffer.byteLength; i += 2) {
temp = viewerIn.getInt16(i, false) - offset;
if (temp > lowest && temp < highest) {
viewerOut.setInt16(i, temp, true);
somme += temp;
goodCell++;
} else {
var val = goodCell === 0 ? 1 : somme / goodCell;
viewerOut.setInt16(i, val, true);
}
}
resultat = new Int16Array(littleEndianBuffer);
}
return resultat;
},
},
});

anyone know how can i fix this issue