Что я делаю не так и получаю: TypeError: Cannot destructure property 'patients' of 'Object(...)(...)' as it is undefined?

Я создал контекст и в дочерние элементы пытаюсь передать значения:

import './App.css';
import React, { createContext, useState } from 'react';
import Content from './components/Content';
import Sidebar from './components/Sidebar';
import PatientService from './components/services/PatientService';

const PatientContext = createContext([{}]);

function App() {
  const [selectedPatient, setSelectedPatient] = useState([]);
  const [patients, setPatients] = useState([{ name: "Username", age: 19 }]);

  async function patientsHasChanged() {
    const patientService = new PatientService();
    const loadedPatients = await patientService.getPatients();
    setPatients(loadedPatients);
  };

  return (
    <div className='app'>
      <PatientContext.Provider value={{selectedPatient, setSelectedPatient, patients, patientsHasChanged}}>
        <Sidebar />
        <Content />
      </PatientContext.Provider>
    </div>
  );
}

export default App;

В одном из компонентов (Sidebar) я достаю некоторые значения:

import React, { useContext } from 'react';
import PatientContext from '../App';

const Sidebar = () => {
    const {patients, setSelectedPatient} = useContext(PatientContext);

    return (
        <div className='sidebar'>
            <div className='search'>
                <input type="text" placeholder='Search' />
                <a href="/TechTask/new"><button>New patient</button></a>
            </div>
            <div className='list'>
                <ul>
                    {patients.map((p) =>
                        <li onClick={setSelectedPatient}>
                            <div className='name'>
                                {p.name}
                            </div>
                            <div className='age'>
                                {p.age}
                            </div>
                        </li>)
                    }
                </ul>
            </div>
        </div>
    );
};

export default Sidebar;

Структура папок:

App.js
components-
---Sidebar.jsx
---Content.jsx

Но в результате получаю ошибку:

TypeError: Cannot destructure property 'patients' of 'Object(...)(...)' as it is undefined.

Насколько я понимаю - это потому, что из контекста достается пустой элемент, но почему? Ведь в контексте есть данные.