ComponentState and foreach

Help
1

I’m trying to make a StatusButton component that will display an icon changing on each click on it.
I made a class derived from ComponentState and I use it in a dialog with a foreach.

The problem is that when I click on one of the buttons, the state seems to change for all the instances. The click event is called only once, so I concluded that there is only one instance of the State. How is it possible ?

import reflex as rx
from reflex.utils import console

class StatusButton(rx.ComponentState):
    state: int = 0

    @rx.event
    def click(self):
        console.warn('button clicked !')
        self.state = (self.state + 1) % 4

    @classmethod
    def get_component(cls, *children, **props):        
        return rx.icon_button(
            rx.match(
                cls.state,
                (0, rx.icon("square")),
                (1, rx.icon("file-check", color="green")),
                (2, rx.icon("file-x", color="red")),
                (3, rx.icon("file-question", color="orange")),
            ),
            variant="ghost",
            on_click=cls.click,            
        )
    
status_button = StatusButton.create

And the test dialog :

import reflex as rx
from .components.statusButton import status_button

class TestDlgState(rx.State):    
    numbers: list[str] = ["1", "2", "3"]

def testDialog() -> rx.Component:    
    return rx.dialog.root(
            rx.dialog.trigger(
                rx.button("!Test!")
            ),
            rx.dialog.content(
                rx.dialog.title("test controls :"),
                rx.dialog.description(
                    rx.vstack(
                        rx.foreach(TestDlgState.numbers, lambda x: status_button())
                    )
                ),
                rx.dialog.close(
                    rx.button("Close Dialog"),
                ),                
            ),                     
        )

Thanks for your help !