How to Dynamically add (one or more ) marker/pulsing dot in real-time on socket.io event?

[rajan-blackboxes]

I want to display marker , when socket.io event calls on any location determined by data coming from socket . For this i've created a socket event like this

....
const [liveData, setLiveData] = useState(null)
useEffect(() => {
	socket.on("post.read", (data) => {
	    setLiveData(data)
	    })	
}, [liveData, setLiveData])

and for showing marker a function

const showMarker = (postData) => {
	    const {id, blood_group, coordinates, condition, contact_number, occur_date, problem_description, problem_name,problem_status} = postData
	    return (
            <Marker
		longitude={coordinates[0]}
		latitude={coordinates[1]}		
		onClick={(e) => console.log(e)}>
		<PinMark
                  type={condition}
                  onMouseOver={() =>
                    setPopupInfo({
                      blood_group,
                      coordinates,
                      condition,
                      contact_number,
                      occur_date,
                      problem_description,
                      problem_name,
                      problem_status,
                    })
                  }
                />
       </Marker>
	)
    }

where id, blood_group, condition, contact_number, occur_date, problem_description, problem_name,problem_status are data to put into popup through PinMark. coordinates are used as longitude and latitude for default react-map-gl Marker .
I've made PinMark as like https://github.com/visgl/react-map-gl/blob/7.0-release/examples/controls/src/pin.tsx .

and in return I have written as

<Map ....>
...
	    {liveData && showMarker(liveData)}

</Map>

But I get problem, The marker is not appended to Map, but rather mark other location whenever other data comes rather making new marker. like below

cut.mp4

Which didn't works as expected, like above, the marker changes its position whenever new live data comes rather than making one.
So,
Is there any way I can make new markers on live data on my code , so that a new marker would added rather than the same marker?
Also,
Is it is possible to add a pulsing dot (blink) in real-time or not instead of marker?
Thank you for your answer.

[Pessimistress]

When you call setLiveData you overwrite any existing value. You need to maintain an array of data points if you wish to render multiple markers.

[rajan-blackboxes]

:/ It was easy .
I've used liveData as array and iterate the every array inside return.

		    {
			liveData.map(({_id, blood_group, coordinates, condition, contact_number, occur_date, problem_description, problem_name,problem_status}, index) => {

			    return (<Marker
					longitude={coordinates[0]}
					latitude={coordinates[1]}		
					onClick={(e) => console.log(e)}
					key={_id}
				    >
					<PinMark
					    type={condition}
					    onMouseOver={() =>
						setPopupInfo({
						    blood_group,
						    coordinates,
						    condition,
						    contact_number,
						    occur_date,
						    problem_description,
						    problem_name,
						    problem_status,
						})
					    }
					/>
			     </Marker>)
			})
		    }

and it worked.
Thank you for your answer.