Stores, context, & reactivity

export function MemoryProvider(props: { children: JSX.Element }) {
  const audioContext = new window.AudioContext();
  const masterAnalyser = audioContext.createAnalyser();

  const [panelsStore, setPanelsStore] = createStore({
    panels: [] as PanelFunction[]
  });

  const memory = {
    audioContext,
    masterAnalyser,

    panels: panelsStore.panels, // This line is the problem
    addPanel(NewPanel: PanelFunction) {
      console.log("Adding a panel...");
      return setPanelsStore("panels", panelsStore.panels.length, () => NewPanel);
    },
    removePanel(OldPanel: PanelFunction) {
      console.log("Removing a panel...");
      return setPanelsStore("panels", panelsStore.panels.filter((panel) => panel !== OldPanel));
    },

    mousePosition: useMousePosition()
  };

  return (
    <MemoryContext.Provider value={memory}>
      {props.children}
    </MemoryContext.Provider>
  );
}

export function MemoryProvider(props: { children: JSX.Element }) {
  const audioContext = new window.AudioContext();
  const masterAnalyser = audioContext.createAnalyser();

  const [panelsStore, setPanelsStore] = createStore({
    panels: [] as PanelFunction[]
  });

  const memory = {
    audioContext,
    masterAnalyser,

    panels: panelsStore.panels, // This line is the problem
    addPanel(NewPanel: PanelFunction) {
      console.log("Adding a panel...");
      return setPanelsStore("panels", panelsStore.panels.length, () => NewPanel);
    },
    removePanel(OldPanel: PanelFunction) {
      console.log("Removing a panel...");
      return setPanelsStore("panels", panelsStore.panels.filter((panel) => panel !== OldPanel));
    },

    mousePosition: useMousePosition()
  };

  return (
    <MemoryContext.Provider value={memory}>
      {props.children}
    </MemoryContext.Provider>
  );
}