onchange debounce react

import React, { useCallback } from 'react';
import _ from 'lodash';

const MyComponent = ({ data, handleInputChange }) => {
  const debounceFunc = useCallback(
    _.debounce(e => handleInputChange(e), 500),
    []
  );

  const handleChange = e => {
    debounceFunc(e);
  };
  return <TextInput data={data} onChange={handleChange} />;
};

export default MyComponent;