Add multiple features to vector layer on click OpenLayers 5 Typescript

Question

I'm trying to add features to a layer on click and I have been successful but it seems that when a feature is added the other feature is hidden?

I create the parts of the layer I need...

    public static highlightOverlay = new olLayerVector({});        
    public static highlightCollection: olCollection = new olCollection();
    public static highlightVectorSource: olSourceVector = ({features:mapValues.highlightCollection})

I create the layer the features will display on

public static addHighlightOverlay(){
let highlightStyleCache = {}; 
mapValues.highlightVectorSource = new olSourceVector({
  features: mapValues.highlightCollection
 })
mapValues.highlightOverlay = new olLayerVector({
source: mapValues.highlightVectorSource,
map: mapValues.map,
style: function(feature,resolution){
 let text = resolution * 100000 < 10 ? feature.get('text') : '';
 if(!highlightStyleCache[text]){
   highlightStyleCache[text] = new Style({
     stroke: new Stroke({color: '#ffcc33', width:2}),
     fill: new Fill({color: 'rgba(255,255,255,0.2'}),
     text: new Text({
       font: '12px Calibri,sans-serif',
       text: text,
       fill: new Fill({
         color: '#000'
       }),
       stroke: new Stroke({
         color: '#f00',
         width: 3
       }),
       zIndex: 10000})
   })
 }

 return highlightStyleCache[text]

 }


 })     
 mapValues.highlightOverlay.setMap(mapValues.map);

 }

I add my feature to the collection

 mapValues.highlightCollection.push(Feature1);

this will get added and the style will show up for "Feature 1" but a successive call to this will add another feature...

mapValues.highlightCollection.push(Feature2);

Feature2 will show up and Feature1 will stay in the collection but Feature1 will lose its style or will be hidden...I'm not sure?

Any help is greatly appreciated!