I should have read the docs more closely. Style has a zIndex property itself.

All I had to do was add the zIndex property to my two Style objects, giving a higher zIndex to my selected style and it now renders the selected-style features on top of the normal-styled features:

export const normalAOIStyle = new Style({
    stroke: new Stroke({
        color: '#004C73',
        width: 1,
    }),
    fill: new Fill({
        color: 'rgba(255, 255, 255, 0)',
    }),
    // The current zIndex on my VectorTileLayer overall is set to 2, 
    // so I set 2 here as well
    zIndex: 2 
})

export const selectedAOIStyle = new Style({
    stroke: new Stroke({
        color: 'rgb(10, 250, 242, 1)',
        width: 2,
    }),
    fill: new Fill({
        color: 'rgba(10, 250, 242, 0.1)',
    }),
    // I want selected feature styles to sit "on top" of normal feature styles
    // so I gave this Style a higher zIndex number
    zIndex: 3
})