Render Items in Component Not the whole component

am getting data from websocket for real live update am updating Inside Popup of leaflet map, useEffect start re-render to get new data so the Popup disappears and I need to click again on the mark on map to see updated data, All I want that the data changes without disappearing of the Popup.
Here is the code of the Component called Positions which carry change of Data and Markers on map.

import React, { useEffect, useState } from "react";
import { useGetAllPositionsQuery } from "../../Redux/service/Positions";
import MarkerClusterGroup from "react-leaflet-cluster";
import { Marker, Popup } from "react-leaflet";
import { Icon } from "leaflet";
import PositionsPopups from "./Positions-Popups/PositionsPopups";
import { useGetWebSocketDataQuery } from "../../Redux/service/Websocket";

export default function Positions() {
  const { data, isLoading } = useGetAllPositionsQuery();
  let [position, setPosition] = useState();

  const { data: ws, error, isLoading: wsLoading } = useGetWebSocketDataQuery();
  useEffect(() => {
    if (ws) {
      ws?.positions?.map((i) => {
        setPosition([i]);
        console.log(i);
      });
    }
  }, [ws]);
  Icon.Default.mergeOptions({
    iconUrl: "https://freesvg.org/img/car_topview.png",
    iconSize: [32, 32], // size of the icon
    shadowAnchor: [4, 62], // the same for the shadow
    popupAnchor: [-3, -20], // point from which the popup should open relative to the iconAnchor
  });

  return (
    <>
      <MarkerClusterGroup chunkedLoading>
        {position?.map((mark) => (
          <Marker key={mark.id} position={[mark.latitude, mark.longitude]}>
            <Popup closeOnEscapeKey>
              <PositionsPopups mark={mark} />
            </Popup>
          </Marker>
        ))}
      </MarkerClusterGroup>
    </>
  );
}

Code of PositionsPopups Component

import React, { useEffect, useState } from "react";
import PositionsPopupsDetails from "./PositionsPopupsDetails";

export default function PositionsPopups({ mark }) {
  const [popupData, setPopupData] = useState(mark);

  useEffect(() => {
    setPopupData(mark);
  }, [mark]);
  return (
    <>
      <div className="device-popup">
        {" "}
        <PositionsPopupsDetails title="fix time" item={popupData.fixTime} />
        <PositionsPopupsDetails
          title="speed"
          item={popupData.speed.toFixed(2) + ` KM`}
        />
        <PositionsPopupsDetails title="address" item={popupData.address} />
        <PositionsPopupsDetails
          title="total distance"
          item={Math.round(popupData.attributes.totalDistance / 1000) + ` KM`}
        />
      </div>
    </>
  );
}

Am trying to only re-render the data in popups not the whole popup component