I’m updating my store inside background script, and trying to use the updated store inside App.jsx. It is the popup for my extension. But always getting the initial state inside the App.jsx.

store.js

const useStoriesStore = create((set) => ({
  stories: [],
  updateStories: (newStories) => set({ stories: newStories }),
}));

export { useStoriesStore };

background.js

useStoriesStore.setState({
  stories: ["Hello", "world"],
});

console.log(useStoriesStore.getState());
// returns ["Hello", "world"]

App.jsx

const App = () => {
  const stories = useStoriesStore((state) => state.stories);
  console.log(stories); // returns [].
  console.log(useStoriesStore.getState()); // returns []

  return <button>change color</button>;
}; 

export default App;