Declaring an external hook, that we can pull into our components

hooks_external_hook.js

import { useCallback, useState } from 'react';

export const usePersistState = ({ key, defaultValue }) => {
  const [value, setValue] = useState(JSON.parse(localStorage.getItem(key) || JSON.stringify(defaultValue)));

  const setter = useCallback((value) => {
    localStorage.setItem(key, JSON.stringify(value));
    setValue(value);
  });

  return [value, setter];
};