How can specify the order of displaying shapes when work with open layer map

Question

I created a map in which consist of different shapes such as 2 circle and one line. The line connects 2 circle Centre. Even if i have added line first and then the circles, the line always come over the circles.

How can set the display order of these shapes?

Also is there any way to draw a single shape with a circle and line as combined single shape?

function drawCircle(lon, lat) {
    var circleFeature = new ol.Feature({
        geometry: new ol.geom.Circle(
            ol.proj.fromLonLat([lon, lat]), // Center coordinate
            40000 // Radius in meters
        ),
    });
    circleFeature.setStyle(style1);
    featuresSource.addFeature(circleFeature);
}

// Function to draw a line between two points on the map
function drawLine(startLon, startLat, endLon, endLat) {
    const lineFeature = new ol.Feature({
        geometry: new ol.geom.LineString([
            ol.proj.fromLonLat([startLon, startLat]),
            ol.proj.fromLonLat([endLon, endLat]),
        ]),
    });
    lineFeature.setStyle(style);

    featuresSource.addFeature(lineFeature);
}

drawCircle(0, 0); // Draw a circle at (0, 0)
drawCircle(1, 1); // Draw another circle at (10, 10)

drawLine(0, 0, 1, 1);
map.addLayer(featuresLayer);