Line opacity breaks layer

[vdemcak]

Hello, I have this pretty simple code that animates a line by changing it's dash-array. While doing this, I've noticed that adding "line-opacity": 0.5 breaks the whole layer and it stops getting displayed. Does anyone have any idea why?

Here is the code snippet:

const Map = () => {
    /* ------------------------------ Line Animator ----------------------------- */
    // Gets changed by useEffect resulting in a smooth animation
    const [lineDasharray, setLineDasharray] = useState<number[]>([2, 2, 2, 2]);

    /* ------------------------------ Layer Styles ------------------------------ */
    const lineStyle = (color?: string) => {
        return {
            type: "line",
            paint: {
                "line-color": color ? color : "#fff",
                "line-width": 3,
                "line-opacity": 0.5,
            },
        } as LayerProps;
    };

    return (
        <MapRoot
            initialViewState={{
                longitude: mapPosition.long,
                latitude: mapPosition.lat,
                zoom: mapPosition.zoom,
            }}
            mapStyle="foo"
        >
            <Source id={`SingleMissionLine`} type="geojson" data={generateLine(currentMission, mapAttrib.packets)}>
                <Layer
                    {...lineStyle()}
                    // Adding "line-opacity": 0.5 under paint property breaks the layer
                    {...{ paint: { "line-dasharray": lineDasharray, "line-color": "#fff", "line-width": 3 } }}
                />
            </Source>
        </MapRoot>
    );
};
export default Map;