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

Здраствуйте я новичок в JS и React, мне нужно сделать так что бы комментарии были связаны с пользователем и отображались по его ID, главный вывод должен быть в PatientInfo

Образец структуры данных:

Код PatientSidebar где выводиться пациенты и при нажатии на них перекидывает на ID выбранного

const PatientInfo = () => {
const { selectedPatient, patientComments, setPatientComments } = useContext(PatientContext);
const moment = require('moment');

const commentInput = React.createRef();
const patientService = new PatientService();

const addPatientComment = () => {

}

return (
    <div className='content'>

        <PatientHeader />

        <div className='info'>
            <div className='short-info'>
                <table>
                    <tbody>
                    <tr>
                        <td>Date of Birth:</td>
                        <td>{selectedPatient.birth}</td>
                    </tr>
                    <tr>
                        <td>Gender:</td>
                        <td>{selectedPatient.gender}</td>
                    </tr>
                    <tr>
                        <td>Country:</td>
                        <td>{selectedPatient.country}</td>
                    </tr>
                    <tr>
                        <td>State:</td>
                        <td>{selectedPatient.state}</td>
                    </tr>
                    <tr>
                        <td>Address:</td>
                        <td>{selectedPatient.city}</td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div className='comments'>
                <div>
                    <p>
                        <h3 className='comments-text'>Comments:</h3>
                    </p>
                    <ul>
                        {
                            // Тут хочу выводить коментарии выбраного пользователя
                            patientComments.map
                        }
                    </ul>
                </div>

                <div className='create-commentInput'>
                    <input  ref={commentInput} className='form-control' type="text"/>
                    <button onClick={addPatientComment} className='add-btn'>+</button>
                </div>

            </div>

        </div>
    </div>
);
}

Код App где я хочу создать функцию getPatientComments, возможно есть другие варианты

function App() {
const [patients, setPatients] = useState([]); // State for adding patients
const [sidebarPatients, setSidebarPatients] = useState([]); // State for adding patients to sidebar
const [selectedPatient, setSelectedPatient] = useState([]); // State for show patients info in PatientInfo.jsx
const [patientComments, setPatientComments] = useState([]);

const getArrayOfPatients = async (patientsPromise) => {
    let arr = [];
    await patientsPromise.then((response) => {
        const patients = response.data;
        for (let patientID in patients) {
            arr.push({
                id: patientID,
                firstname: patients[patientID].firstname,
                lastname: patients[patientID].lastname,
                birth: patients[patientID].birth,
                age: patients[patientID].age,
                gender: patients[patientID].gender,
                country: patients[patientID].country,
                state: patients[patientID].state,
                city: patients[patientID].city,
                currentComments: patients[patientID].patientComments
            });
        }
    })

    return arr;
}

async function getPatientComments() {
    
}

function getPromisePatients(url) {
    return axios.get(url);
}

useEffect(() => {
    getArrayOfPatients(getPromisePatients(`${url}/patientLoad.json`))
        .then((result) => {
            setSidebarPatients(result)
        })
}, [])

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

Код PatientInfo который выводит информацию выбранного пациента и где должны выводиться комментарии

const PatientInfo = () => {
const { selectedPatient, patientComments, setPatientComments } = useContext(PatientContext);
const moment = require('moment');

const commentInput = React.createRef();
const patientService = new PatientService();

const addPatientComment = () => {

}

return (
    <div className='content'>

        <PatientHeader />

        <div className='info'>
            <div className='short-info'>
                <table>
                    <tbody>
                    <tr>
                        <td>Date of Birth:</td>
                        <td>{selectedPatient.birth}</td>
                    </tr>
                    <tr>
                        <td>Gender:</td>
                        <td>{selectedPatient.gender}</td>
                    </tr>
                    <tr>
                        <td>Country:</td>
                        <td>{selectedPatient.country}</td>
                    </tr>
                    <tr>
                        <td>State:</td>
                        <td>{selectedPatient.state}</td>
                    </tr>
                    <tr>
                        <td>Address:</td>
                        <td>{selectedPatient.city}</td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div className='comments'>
                <div>
                    <p>
                        <h3 className='comments-text'>Comments:</h3>
                    </p>
                    <ul>
                        {
                            // Тут хочу выводить комментарии выбранного пользователя
                            patientComments.map
                        }
                    </ul>
                </div>

                <div className='create-commentInput'>
                    <input  ref={commentInput} className='form-control' type="text"/>
                    <button onClick={addPatientComment} className='add-btn'>+</button>
                </div>

            </div>

        </div>
    </div>
);
}

Так же метод patientService-а по добавлении комментариев

saveComment(commentForDatabase, patientID) {
    axios.post(`${url}/patientLoad/${patientID}.json`, commentForDatabase)
        .catch((error) => {
            console.error(error);
        })
        .then(() => {
            // always executed
        });
}

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