How to memoize nested function in react js

Question

How to memoize nested function? For e.g., if we have following memoized components App, Test, OtherComponent

const App = React.memo(() => {
  const handleChange = useCallback((rowData) => (option) => {},[]);
  return <Test data={data} handleChange={handleChange} />;
});

const Test = React.memo(({ data, handleChange }) =>{
  return (
    <div>
      {data.map((rowData) => (
        <OtherComp handleChange={handleChange(rowData)} />
      ))}
    </div>
  );
});

const OtherComp = React.memo(({ handleChange }) =>{});

React.memo will work only if we pass it memoized functions/objects. If we use useCallback, it won’t memoize inner function and React.memo won’t work for OtherComponent.