I want to create a custom React hook called useSaveState that makes managing state synced with localStorage simpler. The hook should initialize the state from localStorage if available and update localStorage whenever the state changes.

How can I create this hook?

This is how I would want to use it:

export default function Counter() {
  const [count, setCount] = useSaveState(0, 'count');//it takes an initial state, and a localStorage key

  return (
    <div>
      <h1>Count incrementor and saver</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

So I basically want to know what I should put in this function:

const useSaveState = (initialState, localStorageKey) => {}

How can I implement the useSaveState custom hook to handle state and localStorage synchronization while following best practices for creating custom hook?