this is my code for the drawing

 const drawLines = () => {

    const points = [[-89.8802, 32.5804], [44.419834, -97.568073]];

    const featureLine = new Feature({
      geometry: new LineString(points),
    });

    const vectorLine = new VectorSource({});
    vectorLine.addFeature(featureLine);

    const vectorLineLayer = new VectorLayer({
      source: vectorLine,
      style: new Style({
        fill: new Fill({ color: 'red', weight: 10 }),
        stroke: new Stroke({ color: 'red', width: 10 }),
      }),
    });
    mapReference.addLayer(vectorLineLayer);

  };

however I see that my drawing happens before my map is actually displayed and my map sits on top of it. breakpoint for when drawing is done

How can I make sure that my drawing is done after my map is displayed?