ReactiveMap

const tempCameraComponents: ReactiveMap<string, ICamera> = new ReactiveMap<string, ICamera>(
    [
        ['left_eye_tracker', {
            status: CameraStatus.LOADING,
            type: CameraType.WIRELESS,
            address: '192.168.0.204',
            activeCameraSection: 'Left Eye',
        }],
        ['right_eye_tracker', {
            status: CameraStatus.LOADING,
            type: CameraType.WIRELESS,
            address: '192.168.0.232',
            activeCameraSection: 'Right Eye',
        }],

    ]
)

export const defaultState: IMdnsStore = {
    connectedUser: '',
    restClient: '',
    camerasMap: tempCameraComponents
}

const [state, setState] = createStore<IMdnsStore>(defaultState)
export const cameras = createMemo(() => mdnsState().camerasMap)

const CameraHandler = () => {
    const _cameras = cameras()
    console.log('cameras:', _cameras.size)
    return (
        <Show
            when={_cameras.size > 0}
            fallback={
                <div class="flex flex-col items-center justify-center w-full h-full">
                    <Text size="2xl" class="font-bold tracking-[0.10rem] text-[white]">
                        No cameras found
                    </Text>
                </div>
            }>
            <For each={Array.from({ length: _cameras.size })}>
                {() => {
                    createEffect(() => console.log('increment:', _cameras.values().next().value))
                    return <Camera {...(_cameras.values().next().value as ICamera)} />
                }}
            </For>
        </Show>
    )
}