Javascript Proxy Object in React Custom Hook

Question

I have 2 custom hooks useFormInput and other useFormInputWithoutProxies which is using Javascript proxy

My Question what benefit does Javascript proxy provides over creating normal custom hooks ?

Can Somebody give real world use case or example as to when one would be using the proxy pattern to create custom hooks ? And is this a good pattern or an anti-pattern.

import { useState } from 'react';

// version using Proxies
function useFormInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  const handler = {
    get: (target, property) => {
      if (property === 'value') {
        return value;
      } else {
        return target[property];
      }
    },
    set: (target, property, newValue) => {
      if (property === 'value') {
        setValue(newValue);
      }
      return true;
    }
  };

  const input = new Proxy({ value }, handler);

  return input;
}

// version without Proxies
function useFormInputWithoutProxies(initialValue) {
  const [value, setValue] = useState(initialValue);

  const input = {
    value,
    onChange: event => {
      setValue(event.target.value);
    }
  };

  return input;
}