Changing data in <Source/> throws "source id changed"

[evrazi]

I am drawing a radius around each point and that is working great. The problem starts when i pass different coordinates into tasks and i get "source id changed" error. Am I doing something wrong and this is expected behavior, or is this a bug?

`
const markers = React.useMemo(

() =>
  tasks.map((posts) => (
    <>
          <Source
              id={posts.id}
            type="geojson"
            data={turf.circle(
              [posts.coordinates[1], posts.coordinates[0]],
              0.5,
              {
                steps: 30,
                units: "kilometers",
                properties: { foo: "bar" },
              }
            )}
          >
            <Layer
              id={posts.id}
              type="fill"
              paint={{
                "fill-color": "#088",
                "fill-opacity": 0.4,
                "fill-outline-color": "yellow",
              }}
            />
          </Source>
    </>
  )),
[tasks]

);
`

"react": "^17.0.1", "mapbox-gl": "^2.7.1", "react-map-gl": "^7.0.10",

[Pessimistress]

https://reactjs.org/docs/lists-and-keys.html#keys

[evrazi]

Damn thanks. Guess i have to revisit "check your code before asking stupid questions on the forums".

Would u know how to fix "Error: Source "jGZpolgxY" cannot be removed while layer "WsdOPlgXP" is using it"?
Its just a console error and it doesn't break anything but i would still like to solve it. It started happening after i added keys and all the answers already posted don't seem to work.

[rhnnss]

wtf it's really work on me, just add "key" on my source