Can't create 2 lines one on top of the other

[issimissimo]

Describe the bug
I'd like to create a line with "border" (something that you can usually see on Google Maps, with "inner portion" of the line with some color, and the "border" with another color).
I'm trying to do this with 2 LineLayer, but the result is unpredictable, sometimes I get the 1st line, sometimes the 2nd one, sometimes a mix of both.
Maybe I'm doing this in the wrong way?

To Reproduce
const LineOnMap = props => {
return (
<MapboxGL.ShapeSource
id="line"
shape={{
type: 'FeatureCollection',
features: props.featureCollection,
}}>
<MapboxGL.LineLayer
id={'linelayer'}
style={{
lineJoin: 'round',
lineColor: 'red',
lineWidth: 2,
lineCap: 'round',
}}
/>
<MapboxGL.LineLayer
id={'linelayer'}
style={{
lineJoin: 'round',
lineColor: 'green',
lineWidth: 2,
lineCap: 'round',
lineGapWidth: 5,
}}
/>
</MapboxGL.ShapeSource>
);
};

[everlaat]

@issimissimo I am facing a similar issue, have you find away to circumvent this?