How to align arrows rotation in OpenLayers?

I am trying to build an arrow track on the OpenLayers library. I used as a basis the code proposed in OpenLayers examples with drawing an arrow picture for each track segment. But the following problem appears when building the track:

Example of track with arrows

The arrows can look in the wrong direction at all, where the track is pointing. Probably, the reason is that there are small shifts of the track (GPS inaccuracy) and the arrow drawing falls on this inaccuracy.

Is it possible to somehow align the arrows with respect to the neighboring lines so that they are aligned?

new VectorLayer({
    source: trackVectorSource,

    // Below style code for arrows draw
    style: (feature, resolution) => {
        const geom = feature.getGeometry()
        const styles = [
            new Style({
                stroke: new Stroke({
                    color: 'rgba(0,119,255,0.76)',
                    width: 4
                })
            })
        ]

        // This is a variable that specifies the number of lines that will be skipped before the arrow is output (to avoid Christmas tree look like)
        const initialSkipCount = resolution / 32
        let skipCount = initialSkipCount
        console.log(skipCount)

        // Segments iterator
        geom.forEachSegment((start, end) => {
            if (skipCount > 0) {
                skipCount--
                return
            }
            skipCount = initialSkipCount

            // Calculate arrow rotation
            const dx = end[0] - start[0]
            const dy = end[1] - start[1]
            const r = Math.atan2(dy, dx)
            styles.push(
                new Style({
                    geometry: new Point(start),
                    image: new Icon({
                        src: '/path/to/track-arrow.png',
                        width: 14,
                        anchor: [0.75, 0.5],
                        rotateWithView: true,
                        rotation: -r
                    })
                })
            )
        })
        return styles
    }
})

Already tried to make a common variable that stored the “approximate” average angle, but it made the arrows look mostly one way.