Radio button to control display to the right in Reflex - display not updating

Question

Recently, I am looking into Python framework call Reflex for building web apps.

What I want to achieve:

When I select different code names in radio box, the code block to the right display corresponding codes. I have a dict store code names as key and code example as value.

sample_codes : dict={'Python':'python code example', 'Java':'Java code example'}

The problem:

When I click on different radio box, on_change=RadioState.set_name seems to work properly. However, the example code in code block is not updating...

In state.py

class RadioState(rx.State):
    sample_codes :dict={ 'Python':'python code example','Java':'Java code example'}
    name:str="Python"
    code:str=sample_code["python"]

    @rx.var
    def change_code(self):
        self.code= self.sample_code[self.name]

In index.py

code_names=['Python','Java']

def display_code_block():
    return rx.hstack(
        rx.vstack
        (
            rx.text("Here are some code examples for you to start with",style=_description_style),
            rx.radio(code_names,
                    variant='soft',
                    color_scheme='grass',
                    spacing='2',
                    size='1',
                    on_change=RadioState.set_name,
                    justify_content="right",
                    width='100%',
                    ),
            ),
  
            rx.box(
                 rx.code_block(
                        RadioState.code, 
                        language="python", 
                        theme="vs-dark",
                        show_line_numbers=True,
                        can_copy=True),
            # align_items="center",
            justify_content="center",
            width="100%",
            height='50vh'
        )
        # width="100%",       
)