How to listen to changes in instance of a class object in React?

how are you?

I'm trying to listen to the changes in an instance of a Class object in a React App. I can see that the value of the class changes, but i can't get a useEffect to listen to this changes!

The class itself is pretty simple:

class Person {
  constructor(name) {
    this.name = name;
    this.hunger = 0;
  }
  increaseHunger() {
    this.hunger += 10;
  }
}
export default Person;

Then i have my React App component:

import React from "react";
import Person from "./classes/Person";
export default function App() {
  const [person, setPerson] = React.useState(new Person("John"));
  React.useEffect(() => {
    console.log("Effect");
  }, [person.hunger]);
  return (
    <div>
      <div>{person.name}</div>
      <div>{person.hunger}</div>
      <button onClick={() => person.increaseHunger()}>Click</button>
    </div>
  );
}

Whenever i click the button, i can see the log inside the class functions and i can see that the hunger changes, but the log in the useEffect functions never triggers. I think that perhaps the reference of the person object in the React component is not changing, but i can't figure out why!

Does anyone knows what i'm may be doing wrong?

You need to update the state so your person.hunger can be trigger and execute your useEffect .

const handleChange = () => {
   setPerson((prev) => {
     return { ...prev, hunger: person.hunger + 10 };
   });
};

Please see LIVE DEMO