React i setState w funkcji asynchronicznej

import { useState } from "react";

class Parent {
	constructor() {
		this.child = new Child();
	}
}

class Child {
	constructor() {
		this.message = '1st message';
	}
}

function Component() {
	const wait = (time) => new Promise(r => setTimeout(r, time));
	const [ parent, setParent] = useState(null);
	const [ update, setUpdate ] = useState(0);
	if(parent === null) setParent(new Parent());
	const click = () => {
		async function run () {
			parent.child.message = '2nd message';
			setUpdate(update + 1);
			await wait(1000);
			parent.child.message = '3rd message';
			setUpdate(update + 2);
		};
		run();
	};

	return <div>
		<button onClick={click}>Run</button>&nbsp;
		<span>{parent && parent.child.message}</span>
	</div>;
}

export default Component;

const [parent, setParent] = useState(() => {
   const randomValue = Math.random() > 0.5;

  if (randomValue) { // tutaj pewnie byłby jakiś bardziej logiczny warunek niż Math.random(), ale chciałem jedynie pokazać jak to działa
    return new Parent();
  }

  return null;
});

const wait = (time) => new Promise(r => setTimeout(r, time));

function Component() {
   // tutaj użycie funkcji bez zmian
}

let parent = new Parent();
function Component() {
   return { parent.child.message };
}

let parent = new Parent(); // przykładowo klasa Parent ustawia nam wartość parent.child.message na "hello world"

function Component() {
   useEffect(() => {
      setTimeout(() => { // Po 5 sekundach ustawiamy nową wartość
         parent.child.message = 'witaj świecie'
      }, 5000)    
   }, []);

   return { parent.child.message }; // Tutaj cały czas będzie stara wartość, czyli nasze hello world
}