Input component wrapper to prevent cursor jump

InputBox.js

import React, { useState, useRef, useEffect } from 'react';
import PropTypes from 'prop-types';

function useRunAfterUpdate() {
  const afterPaintRef = React.useRef(null);
  React.useLayoutEffect(() => {
    if (afterPaintRef.current) {
      afterPaintRef.current();
      afterPaintRef.current = null;
    }
  });
  // eslint-disable-next-line no-return-assign
  return fn => (afterPaintRef.current = fn);
}

const InputBox = React.memo(({ onChange, value, ...props }) => {
  const [localValue, setLocalValue] = React.useState('');
  const runAfterUpdate = useRunAfterUpdate();
  const input = useRef();
  const inputStart = useRef();

  function handleChange(e) {
    input.current = e.target;
    inputStart.current = input.current.selectionStart;
    onChange(e);
  }

  useEffect(() => {
    setLocalValue(value);
    runAfterUpdate(() => {
      if (input.current && inputStart.current) {
        input.current.selectionStart = inputStart.current;
        input.current.selectionEnd = inputStart.current;
      }
    });
  }, [value, runAfterUpdate]);

  return <input {...props} value={localValue} onChange={handleChange} />;
});

InputBox.propTypes = {
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  onChange: PropTypes.func.isRequired,
};

export default InputBox;