How to lift state up with this particular example

I am trying to lift state up. I have four different components Parent, Child1, Child2 and Child3.

The parent component has a default value of ‘Hi’. The default value gets updated to ‘Hi2’ in Child3 component. I want Child1 component to get this updated state of ‘Hi2’ but it doesn’t get updated and still prints out the default value of ‘Hi’ in the console.

I am not sure what I did wrong?

---

import React, { useState } from 'react';
    
function Parent() {
  const [value, setValue] = useState('Hi');

  return (
    <div>
      <Child1 value={value} />
      <Child2 setValue={setValue} />
    </div>
  );
}

function Child1({value}) => {

  const fetchValue = () => {
    console.log('value is: ', value);
  }

  return (
    <div>
      <Text value={value}/>
    </div>
  );
}

function Child2({setValue}) => {

  return (
    <div>
      <Child3 setValue={setValue}/>
    </div>
  );
}

function Child3({setValue}) => {

  const fetchResults = () => {
    setValue('Hi2');
  }

  return (
    <div>
      <Button click={fetchResults }/>
    </div>
  );
}