Limit custom tiles to certain extent in OpenLayers

Question

I want to fit my custom tiles at a certain region. For example let's say i have custom tiles for a certain country (example: USA) and I am using OSM or anything at all. How do i make sure that my tiles fit a certain extent. I tried putting in the extent but the layer does not load. Please help.

map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new OSM({
            wrapX: false,
          }),
        }),
        new TileLayer({
          extent:[12679211,2560587,12703254,2544509],
          source: new XYZ({
            maxZoom: 16,
            projection: projection,
            tileSize: tileSize,
            tileUrlFunction: function(tileCoord) {
              console.log("--------------")
              console.log("before",tileCoord);
              console.log("after", " z = ",tileCoord[0] - 1," x = ",tileCoord[1]," y = ",(-tileCoord[2] - 1))
              return urlTemplate.replace('{z}', (tileCoord[0] - 1).toString())
                .replace('{x}', tileCoord[1].toString())
                .replace('{y}', (-tileCoord[2] - 1).toString());
            },
            wrapX: false
          })
        }),
      ],
      view: new View({
        center:  [12689317.435763245, 2552726.0298609314  ],
        zoom:13,
        minZoom: 0
      })
    });