Where is widget state stored and how to reset it

Hi,

I am building a pretty simple streamlit component that displays a button that calls a function from an external node module. The function from the node module interacts with a browser extension that returns a value upon user interaction, this value is then displayed in Streamlit.

The problem:
When I ran the app for the first time, everything worked fine, but then after clicking the button again, Streamlit is skipping the user interaction part (which is in the My_Component.tsx file) and automatically outputs the initial value. This happens even after I restart the node & streamlit servers.

So far:
I have traced the problem to Widget State and have been able to display it with ScriptRunContext, but I still don’t know

  1. where the data is even stored and more importantly
  2. how to reset it so that the button works as expected.

I also thought about somehow using callbacks for this but for some reason I can’t add the callback to the custom component (even though it’s just a button), plus I don’t think just calling del st.session_state doesn’t work because the st.session_state object is just an empty dictionary, the only way I’ve been able to see what’s happening is through get_script_run_ctx.

Thank you for any suggestions.

For more context, here is the code I am currently using to debug this, I’ve tried resetting the state at various points in the execution, but it still didn’t change the behavior described above.

_my_component = components.declare_component(
    "my_component",
    url="http://localhost:3001"
)


def my_component(label, key=None):
    ctx = get_script_run_ctx()
    ctx.reset()
    st.write(ctx)
    st.session_state.clear()
    st.write(st.session_state)
    return _my_component(label=label, default="0", key=key)

st.session_state.clear()
st.session_state.return_value = my_component(label="my", key="component")
st.write(st.session_state)