D3 on click lister function is processing old values instead of considering the updated values in react

See more:

DOM

Typescript

React

d3js

I am appending a text element in DOM using d3, the function will be something like this

someElement.append('text')
                    .text('x')
                    .on('click', function (d: ITag) {
                        const tagToRemove = find(tags, (tag: ITag) => {
                            return d.index=== tags.index;
                        });
                        removeTag(tagToRemove);//this will remove the passed tagToRemove from tags
                    })

here

tags

is a react state variable of type

ITag[]

, its part of the react functional component.

while DOM loading it adds multiple tags using same above code, then on clicking on each tag needs to remove that specific tag.
problem is that say I added 5 tags, and trying to remove the 2nd tag, which triggers this on click function, but the tags state variable in this on click function showing only the first two tags.
instead of 2nd one if i click the 4th one it shows first four tags.
So instead of using the latest tags its somehow storing the tags available at the time of this element creation and processing that old data only.
i want it to take the latest tags value and process it.

What I have tried:

Tried to destruct the state and pass, move this d3 into separate typescript module and pass this tags to that module, still its considering the tags from their appending time only, not the latest.