Turf js lineIntersect and graphic intersection of two lineStrings are not same

Question

I'm trying to draw intersection point of two lines, but visually it is not correct intersection point. Is there any idea?

I'm using openlayers as map.

// draw two lines on the map: 

const lineFeature1 = new ol.Feature({
geometry: new ol.geom.LineString(ol.proj.transform([startPoint1, endPoint1], 'EPSG:4326', 'EPSG:3857')),
});
const lineFeature2 = new ol.Feature({
geometry: new ol.geom.LineString(ol.proj.transform([startPoint2, endPoint2], 'EPSG:4326', 'EPSG:3857')),

layerSource.addFeature(lineFeature1);
layerSource.addFeature(lineFeature2);

// calculate intersectionPoint:

line1 = turf.lineString([startPoint1, endPoint1])
line2 = turf.lineString([startPoint2, endPoint2])

const intersectionPoint = turf.lineIntersect(line1, line2)
const intersectionCoords = turf.getCoords(intersect.features[0])`
const point = ol.proj.transform(intersectionCoords, 'EPSG:4326', 'EPSG:3857');
const marker = new ol.Feature(new ol.geom.Point(point));

The same problem you can see also here: https://turfjs.org/docs/#lineIntersect