Sorting the page with telemetry cards

Question

I'm looking for best practices for working with telemetry. On my website there are cards with device telemetry. The main parameter is the status (Ok, Error, No data). By this parameter I want to sort cards on the main page. (picture 1)

Telemetry on all devices changes every 5 seconds, I receive data via websocket. I'm using an effector library to store state. Using the library, I track the change of a state object in a map.

    const stateStore = useStoreMap({
        store: $states,
        keys: [device.serial],
        fn: (st) => {
            return st.get(device.serial)
        }
    })

Thanks to this, only the card for which new data has arrived is redrawn.

stateStore stores status, which can constantly change. I need to get this status in the parent component for each device so that I can dynamically sort the device cards on the page by status. (picture 1) I want to avoid unnecessary redraws of the parent component. And I don’t understand well how I can correctly draw cards and their dynamic transition to different statuses. How can i do this?