I am new to qwick and at the moment I am trying to develop some type of ToDo list. For that, I want to create a state when the user opens the site which holds his ToDos. This state should be useable by multiple components.
To create that state, I have a component named stateShare. It creates a contextId, creates a Store with a dict, creates a context via useContextProvider – thats it.

interface TodoStore {
    lists: string[];
}

export const TodoContext = createContextId<TodoStore>('todoContext')

export const StateShare = component$(() => {
    const todoStore = useStore({lists: []});
    useContextProvider(TodoContext, todoStore);

    return null
})

One component in which I am trying to use the state is named DisplayTodo. It should get the context with useContext and then just log it to check if it has access and its serialized.

export const DisplayTodo = component$(() => {
    let todoList = useContext(TodoContext)

    console.log(todoList)

    return (
        <div>
        </div>
    )
})

The two components are returned by the default component in the index.tsx like that:

export default component$(() => {

  return (
    <>
    <StateShare />
    <DisplayTodo />
    </>
  );
});

But when I start the program I get the following error:
Actual value for useContext(todo-context) can not be found, make sure some ancestor component has set a value using useContextProvider(). In the browser make sure that the context was used during SSR so its state was serialized.

I have already tried to move the creation of the context to another file, for example to the index.tsx like that:

interface TodoStore {
  lists: string[];
}

export const TodoContext = createContextId<TodoStore>('todoContext')

export default component$(() => {
  const todoStore = useStore({lists: []});
  useContextProvider(TodoContext, todoStore);

  return (
    <>
    <StateShare />
    <DisplayTodo />
    </>
  );
});

When I then use the DisplayTodo component in the return of the default component in the index.tsx, everything works just fine – but only in the index.tsx. As soon as I move the DisplayTodo to another component or to the layout.tsx return, I get the same error.

What am I doing wrong? How do I have to integrate the component to create the state and the context of it which every other component can use? Is my approach completly wrong? Which concept am I missing?