How I can fix TileOutOfRange" locator="TILECOLUMN in GeoServer 2.17.2 WMTS in openlayers v6?

I am going to use GeoServer WMTS in openlayers and then I found an example in Openlayers website, It seems everything is correct but I get this error:

<ExceptionReport xmlns="http://www.opengis.net/ows/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="1.1.0" xsi:schemaLocation="http://www.opengis.net/ows/1.1 http://geowebcache.org/schema/ows/1.1.0/owsExceptionReport.xsd">
<Exception exceptionCode="TileOutOfRange" locator="TILECOLUMN">
<ExceptionText>Column 21 is out of range, min: 39 max:43</ExceptionText>
</Exception>
</ExceptionReport>

Where should I change in my code, My map zone layers is UTM Zone 38N untill UTM Zone 42N, I chanage EPSG based on UTM zone area but I got 400 bad request again.

const projection = ol.proj.get('EPSG:4326');
const projectionExtent = projection.getExtent();
const size = ol.extent.getWidth(projectionExtent) / 256;
const resolutions = new Array(14);
const matrixIds = new Array(14);
for (let z = 0; z < 14; ++z) {
  // generate resolutions and matrixIds arrays for this WMTS
  resolutions[z] = size / Math.pow(2, z);
  matrixIds[z] = "EPSG:4326:" + z;
}

var wmtsLayers=[
    new ol.layer.Tile({
      title:`${layers_}`,
      opacity: 0.7,
      source: new ol.source.WMTS({
        attributions: '...',
        url: `http://localhost:8080/geoserver/gwc/service/wmts?request=getCapabilities`,
        layer: `${geoServerWs}:${layers_}`,
        matrixSet: 'EPSG:4326',
        format: 'image/png',
        serverType:'geoserver',
        TileLoadFunction:function(tile, src) {
            var xhr = new XMLHttpRequest();
            xhr.responseType = 'blob';
            xhr.open('GET', src);
            xhr.setRequestHeader('Authorization', 'Basic ' + window.btoa(`${geoUserName}` + ':' + `${geoPass}`));
            xhr.onload = function() {
                var objectURL = URL.createObjectURL(xhr.response);
                tile.getImage().onload = function() {
                    URL.revokeObjectURL(objectURL);
                    
    };
    tile.getImage().src = objectURL;
  };
  xhr.send();
},
        projection: projection,
        tileGrid: new ol.tilegrid.WMTS({
          origin:ol.extent.getTopLeft(projectionExtent),
          resolutions: resolutions,
          matrixIds: matrixIds
        })
      })
    })
  ];
 var wmsLayers=[
     new ol.layer.Tile({
         title:`${layers_}`,
           visible: true,
      source: new ol.source.TileWMS({
       url: `http://localhost:8080/geoserver/${geoServerWs}/wms`,
       params: {'LAYERS': `${geoServerWs}:${layers_}`},
 ratio: 1,
        serverType: 'geoserver',
        
        imageLoadFunction: function(image, src) {
            var xhr = new XMLHttpRequest();
            xhr.responseType = 'blob';
            xhr.open('GET', src);
            xhr.setRequestHeader('Authorization', 'Basic ' + window.btoa(`${geoUserName}` + ':' + `${geoPass}`));
            xhr.onload = function() {
                var objectURL = URL.createObjectURL(xhr.response);
                image.getImage().onload = function() {
                    URL.revokeObjectURL(objectURL);
                    
    };
    image.getImage().src = objectURL;
  };
  xhr.send();
},
     
      
      })
   })
];
 
// The Map
    var map = new ol.Map({
        target: 'map',
       view: new ol.View({
             zoom: 5,
            center:ol.proj.fromLonLat([54.233527,32.343721])
         }),
         
         
        layers: [baselayers,],
       overlays: [overlay],
       
    });

*GeoServerWm is name of worksapce.