How can I use Zustand and ResizeObserver

Question

I created this hook. but for some reason, it doesn't work. isDesktop returns false under the 1280px but <profilelayout> doesn't go away. it should show just <Form /> component. can anyone help me I couldn't figure out

export const useDeviceType = create(set => {
  let isDesktop = false;
  let isPhone = false;

 const resizeObserver = new ResizeObserver(entries => {
    for (const entry of entries) {
      const { clientWidth } = entry.target;
      if (clientWidth > 1280) {
        isPhone = false;
        isDesktop = true;
      } else {
        isDesktop = true;
        isPhone = false;
      }
      set({ isDesktop, isPhone });
    }
  });

if (typeof document !== 'undefined') {
    resizeObserver.observe(document.body);
}
  return { isDesktop, isPhone };
});

const EditEmail = () => {

    const isDesktop = useDeviceType();
  return (
    <>
      {isDesktop ? 
        <ProfileLayout>
           <Form />
        </ProfileLayout> :
          <Form /> 
      }
    </>
  );

Answer 1

Because your if and else blocks are the same:

if (clientWidth > 1280) {
  isPhone = false;
  isDesktop = true;
} else {
  isDesktop = true;
  isPhone = false;
}

And an object is returned from the hook, you need to destruct it like so:

const { isDesktop } = useDeviceType();