array of objects within an object can not be accessed

Question

I want to access this JSON Data and display its values on the screen. I created a state to hold the doctor object then I want to loop over it and display its values. also, I want to show roomName. but all I can do is display all the objects in the "allReservation" array. how can I access the doctor object and how can I access the elements inside of it?

the JSON Data

{
    "totalReservations": 1,
    "allReservations": [
        {
            "_id": "62d5f88672dd3fadbeeee7d5",
            "userId": {
                "_id": "62cf836dbbb2ddfdcca4df4d",
                "image": "https://res.cloudinary.com/devsalem/image/upload/v1657766765/YOU/fuiiwkvdxwgczpfkv4d9.jpg",
                "name": "Hassan Ibrahim",
                "mobilePhone": "01010644258",
                "gender": "male",
                "email": "nohahassan497@yahoo.com",
                "birthDate": "1991-06-04",
                "trustContact": "01016166161",
                "contactRelation": "mom",
                "sessions": [
                    "Individual Session"
                ]
            },
            "doctor": {
                "_id": "62cf8f75bb6b1eb825e8ab93",
                "image": "https://res.cloudinary.com/devsalem/image/upload/v1657769832/YOU/umf1hkh7mjtasd5zy0vr.jpg",
                "name": "ruba hamed",
                "mobilePhone": "01222990000",
                "gender": "female",
                "email": "drruba1111@gmail.com",
                "birthDate": "22/4/1980",
                "languages": [
                    "english, spanish, arabic"
                ],
                "licIssuedDate": "22/2/1998",
                "licExpiryDate": "22/2/1999",
                "profession": "therapist",
                "sessionPrice": "400"
            },
            "startDate": "12:00 pm",
            "date": "2022-07-26",
            "roomName": "6feb87ad-b0cb-4877-a5ed-44e0c1f79fd8"
        }
    ]
}

this is my code

import React, { Component, Fragment } from "react";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";

import axios from "axios";

import './c-session.css';

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPhone, faCalendar } from "@fortawesome/free-solid-svg-icons";

import clientimg from '../../../pictures/0_GettyImages-1333254883.png';
import clientname from '../../../pictures/icons8-name-tag-48.png';
import clientdate from '../../../pictures/Icon material-date-range.png';
import clientsession from '../../../pictures/icons8-question-and-answer-session-with-speech-bubble-48.png';
import clientcall from '../../../pictures/icons8-video-call-64.png';

const CSessionFrag = (props) => {

    console.log('hi noha ana l frag');
    const navigate = useNavigate();

    const token = props.token;

    const [date, setDate] = useState();
    const doctors = {};

    const [doctorsArray, setDoctorsArray] = useState(doctors);

    useEffect(() => {
        axios.get('/reservation', {
            headers: {
                'token': token
            }
        })
            .then(res => {
                console.log('sesssssssssssion fragment of doctorProfile response', res.data.allReservations[0].doctor);
                console.log('sesssssssssssion fragment of doctorProfile response', res.data.allReservations[0].roomName);
                const reserv = res.data.allReservations;
                const allData = reserv[0];
                setDoctorsArray(allData);
                console.log('l arayyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy', doctorsArray);
                // setImmediate(res.data.allReservations.date);
            }).catch(e => {
                console.log('sesion errooooooor', e);
            })
    }, []);

    return (
        <Fragment>
            {
                Object.keys((doctorsArray)).map((key, doctor) => (

                    <Fragment key={doctorsArray[key]._id} >
                        <div className="c-session_card">

                            <div className="c-session_card_top">
                                <img className="c-session_card_top_img" src={doctorsArray[key].image} />
                            </div>
                            <div className="c-session_card_middle">
                                <p className="c-session_card_txt" id="c-session_card_name">
                                    <img className="c-session_card_icon" id="c-session_name" src={clientname} />
                                    {doctorsArray[key].name}
                                </p>

                                <p className="c-session_card_txt" >
                                    <img className="c-session_card_icon" src={clientcall} />
                                    {doctorsArray[key].profession}
                                </p>
                                <p className="c-session_card_txt" id="c-session_date_p" >
                                    <img className="c-session_card_icon" id="c-session_date" src={clientdate} />
                                    {date}
                                </p>
                                <p className="c-session_card_txt" id="c-session_date_p" >
                                    <img className="c-session_card_icon" id="c-session_date" src={clientdate} />
                                    {doctorsArray[key].sesionPrice}
                                </p>
                            </div>
                            <div className="c-session_card_bottom">
                                <button className="c-session_card_bottom_btn" id="c-session_profile_btn" onClick={() => { navigate('/doctorprofile', { state: { docId: doctorsArray[key].id } }) }}>Profile</button>
                                <button className="c-session_card_bottom_btn" id="c-session_call_btn" onClick={() => navigate('/startsession', { state: { docId: doctorsArray[key].id } })}>
                                    <FontAwesomeIcon
                                        icon={faPhone}
                                        id="c-session_call_btn_icon"
                                    />
                                    Start Session
                                </button>
                            </div>
                        </div>
                    </Fragment >




                ))
            }
        </Fragment >
    );
}

export default CSessionFrag;