src/hooks/useSyncedState.ts

import { Dispatch, SetStateAction, useEffect, useState } from 'react';

export function useSyncedState<T>(
  initialValue: T
): [T, Dispatch<SetStateAction<T>>] {
  const [state, setState] = useState(initialValue);

  useEffect(() => {
    setState(initialValue);
  }, [initialValue]);

  return [state, setState];
}

使い方は useState と同じです。