How to select with rectangle box multiple points that come from tileserver GL

Question

I have a tiled point dataset coming from tile server GL. This is how I load data onto open layers web map:

 var vectorTileLayer = new VectorTileLayer({
  source: new VectorTileSource({
    format: new MVT(),
    url: 'http://localhost:8080/data/benas1/{z}/{x}/{y}.pbf',
    maxZoom: 22
  })
});

async function applyMapboxStyle() {
  try {
    const response = await fetch('http://localhost:8080/styles/pointStyle/style.json');
    const glStyle = await response.json();
    await applyStyle(vectorTileLayer, glStyle, 'benas1');
    console.log('Style applied successfully!');
  } catch (error) {
    console.error("Error applying style: ", error);
  }
}  

map.addLayer(vectorTileLayer);
applyMapboxStyle();

// Define the raster tile layer
var rasterTileLayer = new TileLayer({
  source: new XYZ({
    url: 'http://localhost:8080/styles/hybrid/{z}/{x}/{y}.png',
    
    maxZoom: 22
  })
});

map.addLayer(rasterTileLayer);

How can I select and print with console.log the the number of points and all their values with rectangle box? Is it even possible with tiled layers?

I draw a box with this function :

function createBox() {
  let geometryFunction = function(coordinates, geometry) {
    if (!geometry) {
      geometry = new Polygon([]);
    }
    const start = coordinates[0];
    const end = coordinates[1];
    geometry.setCoordinates([
      [
        start, [start[0], end[1]], end, [end[0], start[1]], start
      ]
    ]);
    return geometry;
  };
  return geometryFunction;
}

// Draw interaction for rectangles (boxes)
const drawRectangleInteraction = new Draw({
  source: source,
  type: 'Circle',
  geometryFunction: createBox()
});

// Add drawend event listener to stop drawing after the rectangle is complete
drawRectangleInteraction.on('drawend', function() {
  setActiveInteraction(null); // Deactivate drawing interaction
});