Why isn't my state updating

[itzcodex24]

Hi everyone, I am using React JS. I have an issue with Zustand.

This is my store.ts file

export const store = create<Store>((set) => ({
  focusedApp: undefined

  openApplication: (name) => {  
    set((state) => {
        focusedApp: name,
      };
    });
  },

  closeApplication: (name) =>
    set((state) => {
        focusedApp: undefined,
      })
    }),

  focusApplication: (name) =>
    set((state) => {
      return {
        focusedApp: name,
      };
    }),
}));

This is my useStore.ts file/hook

import { store } from "../store";

export const useStore = () => {
  return store((state) => state);
};

This is inside my App.tsx

 const {focusedApp, focusApplication} = useStore(); // I have also tried:  const focusedApp = store((state) => state.focusedApp) 

return (
  <>
         <h1>Hello World : {focusedApp}</h1>
        <button onClick={() => openApplication("WOW")}>Focus app</button>
  </> 
)

The first time the focusedApp is changed, the change is also reflected on the UI. However, when I call the openApplication & focusApplication functions, the state is updated correctly. However, when calling the closeApplication function, the UI is no longer being updated

P.S: What I have provided here is very minimal compared to the rest of my code. Addionally, there a more properties as part of the store.ts file and there is more content being displayed as part of the App.tsx file. I have only added what I think is relevant here.