useControls doesn't update object fields values in UI

[user753]

export default function App() {
  const [n, setN] = useState(1);
  const obj = { foo: n };

  useControls(obj, [obj]);

  return (
    <div>
      <button
        onClick={() => {
          setN((n) => n + 1);
        }}
      >
        increase
      </button>
      <pre>{JSON.stringify(obj, null, "  ")}</pre>
    </div>
  );
}

When I click the button I expect that foo field value would be updated in leva UI.
Is there a reason for it?
And what is the best way to achieve this behavior?
https://codesandbox.io/s/serene-allen-6eww2o?file=/src/App.tsx