Объект состояния не доступен элементам DOM - ReactJS

Question

У меня есть одностраничная система реагирования на состояние, и по какой-то причине я могу JSON.stringify мой applicant объект в DOM, но если я попытаюсь получить доступ к чему-либо из applicant по ссылке, я ничего не получу.

В частности, я имею в виду, когда я пытаюсь использовать applicant.bio, и я ничего не получаю.

Вот компонент:

// src/core/Project.js single project component

import React, {useState, useEffect} from 'react';
import Layout from '../core/Layout';
import {getProjects, read, listRelated, getBraintreeClientToken} from '../core/apiCore';
import {getApplication} from '../user/apiUser';
import Card from '../core/Card';
import {isAuthenticated} from '../auth';
import {Link} from 'react-router-dom';
import moment from 'moment';

const SelectApplicant = (props) => {
  const [applicant, setApplicant] = useState({});
  const [error, setError] = useState(false);
  const {user: {_id, name, email, role_type}} = isAuthenticated();
  const token = isAuthenticated().token;

  const {skills, bio, applicantName, studying} = applicant;

  const loadApplicant = (applicationId, userId) => {
    getApplication(userId, applicationId, token).then(data => {
      if(data.error) {
        setError(data.error);
      } else {
        setApplicant(data);
      }
    });
  };

  useEffect(() => {
    const applicationId = props.match.params.applicationId;
    loadApplicant(applicationId, _id);
  }, [props]);

  return (
      <Layout title="Select Applicant." description="One step closer." className="container">
          <div className="container">
         <div className="row">
                        <>
                        <div className="card col-4 mb-3">
                          <div className="card-header name">{applicant.applicantName && applicant.applicantName}</div>
                          <div className="card-body">
                              <p style={{fontSize:"smaller"}} 
                                 className="Lead"> 
                                 Studying {applicant.studying} at {applicant.university}
                              </p>
                          <hr/>
                        <p style={{fontSize:"small",fontStyle: "italic"}} 
                             className="black-10">
                             "Tell us why you'd make a great fit..."
                             </p>
                          <p className="Lead" style={{fontSize: "small"}}>{applicant.bio}</p>
                              <hr/>

                                                        {JSON.stringify(applicant)}

                              {applicant.skills && applicant.skills.map((s, j) => {
                                return(
                                <>  
                                  <p style={{fontSize: "smaller", fontStyle:"italic"}} 
                                     className="black-10" key={j}>
                                     "{s}..."
                                   </p>
                                  <p style={{fontSize: "smaller"}} 
                                     className="Lead">
                                     {s.experience[j]}
                                     </p>
                                  <hr/>
                                </>
                                )
                              })}
                          <p style={{fontSize:"smaller"}} className="sm">Posted {moment(applicant.createdAt).fromNow()}</p>
                          <button className="btn btn-sm btn-outline-dark">View Profile</button> 
                          <Link to={`admin/application/${applicant._id}`}>
                          <button className="btn btn-sm btn-outline-dark ml-2">Select Applicant</button> 
                          </Link>
                          </div>
                        <hr/>
                        </div>
                        </>
                    </div>
                </div>
      </Layout>
  );
};

export default SelectApplicant;