I have an application that uses the openlayers library in react to display a map.
I use an internal raster tile server that has a strange a strange configuration.
all tiles are offset and squished unless i perform this action:

function calculateResolutionByProjection(projection:any):number[]{
const projectionExtent = get(projection)?.getExtent();
const startResolution = getWidth((projectionExtent as number[])) /256;
const zoomLevels=24;
const resolutions = new Array(zoomLevels)
for(let i=0;i<resolutions.length;++i){
    resolutions[i] = startResolution/Math.pow(2,i);
}
return resolutions;

}

and use the resulting array as the resolutions for the tileGrid –

const getMapLayer = ()=>{
const url= 'http://<internal server url>/query?request=ImageryMaps&channel=1000&version=113&x={x}&y={y}&z={z}.png'
return new TileLayer({
    source: new XYZ({ url: localDevelopementUrl})
})
return new TileLayer({
    source: new XYZ({ url: nesherUrl,
    projection:"EPSG:4326",
    crossOrigin:"Anonymous",
    cacheSize:2048,
    tileGrid: new TileGrid({
        resolutions: calculateResolutionByProjection("EPSG:4326"),
        origin: [-180, 180],
        minZoom: 1,
        tileSize:256
    })
    })
})

}

if I do not adjust the resolutions, the map is offset, and squished.
how can I do the same for react-leaflet, and what could be the cause for this?