I have already mapped my map as below. After mapping, I added some properties to my map features. So How could I update this map. I try this map.getSource('lines').setData(responseData) but I got two overlapping map. Any help is appreciated.

map.on('load', function() {

    map.addSource('lines', {
        type: 'geojson',
        data: responseData
        });

        map.addLayer({
            'id': 'lines',
            'type': 'fill',
            'source': 'lines',
            'layout': {},
            'paint': {
                'fill-color': '#4682B4',
                'fill-opacity': 0.8,
            }
        });
        map.setPaintProperty('lines', 'fill-color', ['get', 'color'])
})

Adding some properties to the already mapped map.

const links = await fetch(`http://127.0.0.1:8000/api/network/4/edges/`);
const linksData = await links.json();
let ar = map.getSource('lines')._data.features.map((item, i) => {
    let currentLayer = linksData.find(
        element => element.edge_id === item.properties.edge_id)
    item.properties.name = currentLayer.name
    item.properties.length = currentLayer.length
    item.properties.speed = currentLayer.speed
    item.properties.lanes = currentLayer.lanes
})

Updating the map after adding properties

map.getSource('lines').setData(responseData)
map.setPaintProperty('lines', 'fill-color', ['interpolate', ['linear'],
            ['get', 'lanes'], 0, 'rgb(255, 255, 255)', 5, 'rgb(255, 0, 0)'])

But instead of updating the map, I got two overlapping maps. How can I fixed it please?