Как правильно передать контекст React?

В компоненте App я создал состояние patientData с одним тестовым полем. После того, как компонент отрендерился, вызываю хук useEffect и передаю новое состояние для patientData. В это же время patientData я передаю в дочерние компоненты, как контекст. Проблема в том, что в дочерние компоненты изначально прилетает дефолтное состояние, а не то, которое я задал в useEffect. Как это можно исправить?

Вот мой код:

function App() {
  const [patientData, setPatientData] = useState({
    name:'TEST'
  });

  useEffect(async () => {
    const db = await firebase.database();
    const patientRefs = {
      name: db.ref('name'),
      age: db.ref('age'),
      birth: db.ref('birth'),
      gender: db.ref('gender'),
      country: db.ref('country'),
      state: db.ref('state'),
      city: db.ref('city')
    }

    patientRefs.name.on('value', (elem) => patientRefs.name = elem.val());
    patientRefs.age.on('value', (elem) => patientRefs.age = elem.val());
    patientRefs.birth.on('value', (elem) => patientRefs.birth = elem.val());
    patientRefs.gender.on('value', (elem) => patientRefs.gender = elem.val());
    patientRefs.country.on('value', (elem) => patientRefs.country = elem.val());
    patientRefs.state.on('value', (elem) => patientRefs.state = elem.val());
    patientRefs.city.on('value', (elem) => patientRefs.city = elem.val());

    setPatientData(patientRefs);
  }, []);

  useEffect(() => {
    console.log(patientData);
  }, [patientData])

  return (
    <div className='app'>
      <Context.Provider value={patientData}>
        <Sidebar />
        <Content />
      </Context.Provider>
    </div>
  );
}

Код компонента в котором мне нужно использовать patientData:

const Sidebar = () => {
    const value = useContext(Context);

    const addPatient = () => {
        //Some data
    }

    useEffect(() => {
        console.log(value.name);
    }, []);

    return (
        <div className='sidebar'>
            <div className='search'>
                <input type="text" placeholder='Search' />
                <input type="button" onClick={addPatient} value='New Patient' />
            </div>
            <div className='list'>
                <p></p>
                <p></p>
            </div>
        </div>
    );
};

И вместо большого объекта с нужными мне данными я получаю дефолтные значения, хоть стейт уже изменился