based on: https://overreacted.io/making-setinterval-declarative-with-react-hooks/

useRefState.ts

import * as React from 'react';

/**
 * extend the React.useState to have the state referente, so it will be possible to use its value
 * inside of other callbacks
 *
 * @param {T} initialValue
 *
 * @return {[T, React.MutableRefObject<T>, React.Dispatch<React.SetStateAction<T>>]} array
 */
export function useRefState<T>(
	initialValue: T
): [T, React.MutableRefObject<T>, React.Dispatch<React.SetStateAction<T>>] {
	const [state, setState] = React.useState<T>(initialValue);
	const stateRef = React.useRef<T>(state);
	React.useEffect(() => {
		stateRef.current = state;
	}, [state]);
	return [state, stateRef, setState];
}

export default useRefState;