Using Zustand with Immer and typescript does not cause a re-render when nested properties are changed

Question

I'm using React/Zustand/Immer all in typescript. When I update the value of a nested property using Zustand/Immer, I can see by adding breakpoints etc..., that the property is correctly updated. However the UI is never updated as it does not trigger a re-render.

If I drop Immer and instead resort to standard Zustand, re-rendering happens as expected and the UI updates.

Here is the Zustand/Immer related code:

export class MyNestedObject {
    name: string = "";
}

export interface LinkageRunnerStore {
    nestedObject: MyNestedObject;

    updateName: (name: string) => void;
}

export const useLinkageRunnerStore = create(immer<MyNestedObject>((set, get) => ({
    nestedObject: new MyNestedObject(),

    updateName: (name: string) => set((state) => {
        state.nestedObject.name = name
    }),

})))

and the usage is here:

const [name, updateName] = useLinkageRunnerStore((state) => [state.nestedObject.name, state.updateName]);