So, I am trying to adjust my sidebar in a dashboard and I load the value from localstorage and I get this issue from Nextjs

A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:

const [sidebarWidth, setSidebarWidth] = useState(() => {
    if (typeof window === 'undefined') return 216; // SSR guard
    const saved = localStorage.getItem('sidebarWidth');
    if (!saved) return 216;
    const width = Number(saved);
    return width >= 180 && width <= 320 ? width : 216;
  });

I tried this one as well and it did not work

useEffect(() => {
  const saved = localStorage.getItem('sidebarWidth');
  if (!saved) {
    setSidebarWidth(216);
    return;
  }
  const width = Number(saved);
  setSidebarWidth(width >= 180 && width <= 320 ? width : 216);
}, []);