Reactで、Expressからの情報を表示できない

Question

お世話になります。

相変わらず、exprsssへのリクエスト周りで苦戦しています。
参考のように、postmanでは、expressにリクエストできるのですが、これをreactでやろうとすると、なぜかエラーが出るor出なくても、Cannot read property 'name' of undefined と言われています。

1. コンソールには、getした情報が出ているが、ブラウザには、Cannot read property 'name' of undefinedと出る
2. ブラウザをリフレッシュすると、この場合はコンソールにエラ〜メッセージが出力される。

という症状に苛まれています。
自分で試したことは、

1. HOOKを試す
2. fetchを試す
3. axiosを試す
4. axiosには、corsが必要なことがわかり、それを組み合わせる
5. それでも動かない

調べていっても、どれも微妙に書き方だったりアプローチが違っていて、そろそろわからなくなってきています....
どこで僕がミスっているのかが、わからなくなっています・
react, express, cors, axiosを用いて、"知的好奇心"の文字列だけ引っ張るやり方を知りたいです。

[
    {
        "trait_id": "big5_openness",
        "name": "知的好奇心",
        "percentile": 0.8132488073788707
    },
    {
        "trait_id": "big5_conscientiousness",
        "name": "誠実性",
        "percentile": 0.7249905110313153
    },
    {
        "trait_id": "big5_extraversion",
        "name": "外向性",
        "percentile": 0.994361109700101
    },
    {
        "trait_id": "big5_agreeableness",
        "name": "協調性",
        "percentile": 0.9611599687822684
    },
    {
        "trait_id": "big5_neuroticism",
        "name": "感情起伏",
        "percentile": 0.39308810113669834
    }
]

Big5.js(React)

import React from 'react';
import {
    CardColumns
} from 'react-bootstrap';
import axios from 'axios';

import Big5List from '../components/Big5List.js';

class Big5sRio extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            big5s:[]
        };
        this.loadAjax();
    }

    async loadAjax(){
        const res = (await axios.get('http://localhost:5000/big5db/all'))
        console.log(res)
        
        this.setState({
            big5s: res
        })
    }

    async loadAjax2() {
        try {
            const res = await fetch('http://localhost:5000/big5db/all');
            const json = await res.json();
            console.log(json)
            this.setState({
                big5s: json,
            });
        }
        catch (err) {
            console.error(err);
        }
    }

    render(){
    const big5ss = this.state.big5s[0].name;
        return(
            <div>
                {big5ss && big5ss}
            </div>   
        )
    } 

}

export default Big5sRio;

BIg5db_controllers.js(該当箇所のみ)

const getBig5all = async (req, res, next) => {

    let big5s;
    let big5ss;

    try {
        await client.connect({ useUnifiedTopology: true });

        var db = client.db("test_db");
        var collection = db.collection("Big5");
    
        big5s =  await collection.find({}).toArray();
        big5rio = big5s[1].personality.map(({trait_id,name,percentile})=>({trait_id,name,percentile}))

    } catch (error) {
        return res.json({message: 'Could not retrieve products.'});
    };
    client.close();

    res.json(big5rio)
}

app.js(cors追加済み)

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var cors = require("cors");

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var big5db = require('./routes/big5db');
var twitter = require('./routes/twitter');
var cognition = require('./routes/cognition');

var app = express();

app.use(cors());

/*
//Reactからのリクエストを受け取るのに必要
const allowCrossDomain = function(req, res, next) {
  res.header('Access-Control-Allow-Origin', req.headers.origin)
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE')
  res.header(
    'Access-Control-Allow-Headers',
    'Content-Type, Authorization, access_token'
  )

  // intercept OPTIONS method
  if ('OPTIONS' === req.method) {
    res.send(200)
  } else {
    next()
  }
}
app.use(allowCrossDomain)
*/


// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/twitter', twitter);
app.use('/big5db', big5db);
app.use('/cognition', cognition);


// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

関係しているファイルは、おそらくこの辺りだと思います。
必要な情報をかけていない場合、申し付けください。