Как вывести данные всех пользователей, имя фамилия год рождения с firebase создавая список в React

Здраствуйте, я новичок в JS и React, мне хотелось бы создать метод или что-то еще что бы выводить всех пользователей с базы данных в Sidebar в виде элементов списка таком виде:

Вот код App

import './app.css';
import axios from 'axios';
import React, { createContext, useEffect, useState } from 'react';
import Content from '../content/Content';
import PatientSidebar from '../patientsSidebar/PatientSidebar'
import { url } from '../../services/PatientService'

export const PatientContext = createContext([{}]);

function App() {
const [patients, setPatients] = useState([]);
const [sidebarPatients, setSidebarPatients] = useState([]);
const [selectedPatient, setSelectedPatient] = useState([]);

async function patientsHasChanged() {
    axios.get(`${url}/patientLoad.json`)
        .then((response) => {
            const patients = response.data;

            for (let patientId in patients) {
                console.log(
                    patients[patientId].firstname,
                    patients[patientId].lastname,
                    patients[patientId].age,
                    patients[patientId].birth,
                    patients[patientId].gender,
                    patients[patientId].country,
                    patients[patientId].state,
                    patients[patientId].city
                )
            }
        })
        .catch((error) => {
            console.error(error);
        })
        .then(() => {
            // always executed
        });

    // const newSelectedPatient = {
    // }
    
}

async function showPatients(patients) {

}

useEffect(() => {
    patientsHasChanged();
}, []);

return (
  <div className='app'>
    <PatientContext.Provider
    value={{patients, setPatients, sidebarPatients, setSidebarPatients, selectedPatient, setSelectedPatient}}>
          <PatientSidebar />
          <Content />
    </PatientContext.Provider>
  </div>
);

}

 export default App;

А здесь мне нужно выводить пользователей

import React, { useContext } from 'react';
import { PatientContext } from '../app/App'
import { useHistory } from 'react-router-dom';

const PatientSidebar = () => {
const { setSelectedPatient, sidebarPatients } = useContext(PatientContext);
const history = useHistory();

return (
    <div className='sidebar'>
        <div className='search'>
            <input type="text" placeholder='Search' className='search-form' />
            <a href="/patient/new"><button className='new-btn'>New patient</button></a>
        </div>

        <div className='list'>
            <ul>
                {
                    sidebarPatients.map((p) =>
                    <li key={p.id} id={p.id}>
                        <div id={p.id} className='name'>
                            {p.firstname}
                        </div>
                        <div id={p.id} className='age'>
                            {p.birth}
                        </div>
                    </li>)
                }
            </ul>
        </div>
    </div>
);
}

 export default PatientSidebar

Буду благодарен любой помощи, если нужна дополнительная информация спрашивайте, отпишу.