Use multiple refs for a list in React

useMultipleRefs.js

/*
 * This is helpful when you have multiple items and want to have some control over each of them.
 */

export const useMultipleRefs = (n) => {
  const refs = useRef(
    Array(n)
      .fill(1)
      .reduce((acc, _, index) => {
        acc[index] = React.createRef();
        return acc;
      }, [])
  );

  return refs.current;
};