Lazy initialization problem with local storage in Next js

I’ve encountered a problem referencing window; the error is described as:

ReferenceError: window is not defined

I’m trying to set a local storage value by using lazy initialization:

const [colors, setColors] = useState(()=>{
  if(window){
    return localStorage.getItem("_appColor") ?
    JSON.parse(localStorage.getItem("_appColor")) : null
  }else {
    return null
  }
});

I tried adding a check for window object in the code above, but I still get the reference error.

I didn’t use useEffect because it causes the color object to be undefined initially and then it will get the data from local storage.

How to use Lazy initialization for useState hook inside of client components to get local storage data without encountering reference error?