Loading data from two different models and combine them in React Js using hooks and axios

Question

I am loading data from two different models (patients and diagnoses). I need to display patients' diagnoses, but in order, to do that, I need to pull patients.main_diagnoses to get the 'id' of diagnose, and then I need to find that id in diagnoses.

Calling the API to get patients and diagnoses. Also, I am trying to get the diagnosis data to render.

useEffect (async () => {
    try {
        response = await patientService.getDiagnosesList()    
        options = await response.map ((diagnose) => ({
                'value': diagnose.id, 
                'label': diagnose.name
            }))
        setDiagnoses(options)


        response = await patientService.getPatient(id)
        setPatient(response)
        setLoading(false)
    } 
    catch (error) {
        console.log(error)
    }
}, [])

After that I am trying to render the data in return ()

 <div>
            <ul>
                <li>Příjmení a jméno pacienta</li>
                <li>{patient.last_name} {patient.first_name}</li>
                <li>Rodné číslo pacienta</li>
                <li>{patient.birth_number}</li>
                <li>Diagnóza</li>
                <li>{patientDiagnose}</li>
                <li>Oddělení</li>
                <li>{patient.current_hospital_care?.department.description || patient.current_ambulance_care?.department.description }</li>
                <li>Ošetřující lékař</li>
                <li>No data</li>
                <li>Poznámka</li>
                <li>{patient.note || 'Žádné poznámky'}</li>
                <li>Žádost o konzulium</li>
                <li>Příjmení a jméno pacienta</li>                    
            </ul>
        </div>

Thank you for your help.