オブジェクト内の配列内のネストされたオブジェクトにアクセスできません

私はまったく新しいです。これは、他の誰かが同様の問題を抱えていることを望んでいた私の最初の質問投稿です。

APIURL

APIデータを受け取り、JSON形式に変換しています。そこから、オブジェクト（各モンスター）内のキーと値にアクセスできます

hit_points: 17   (key: value)
hit_dice: "5d6"   (key: value)
speed: {fly: 40, walk: 20}   (object)

special_abilities: Array(1)
  0:
   desc: "some text"
   name: "One with Wind"

私はアクセスすることができますspecial_abilities[0].name、この場合私は戻ってき"One with Wind"ます。

私がどうしたらいいかわからないのは、モンスターの能力が1つしかないときに、スクリプトをクラッシュさせずに3つすべてを表示する方法が1つ以上ある場合です。

import React, {useState, useEffect} from 'react';
import './App.css';

function currentMonster({match}) {
    const [item, setItem] = useState([]);
    useEffect (() => {
        fetchMonster();
    }, []);

const fetchMonster  = async () => {
    const mob = match.params.id.toLowerCase();
    const fetchMonster = await fetch(`https://api.open5e.com/monsters/${mob}/?format=json`)
    const monster = await fetchMonster.json();
    setItem(monster)
    console.log(monster);
// const abilities = monster.special_abilities[0].name
}
    return (
            <div>
                <h1>{item.name}</h1>
                <p>Size: {item.size}</p>
                <p>Race: {item.type}</p>
                <p>Alignment: {item.alignment}</p>
                <p>Armor Class: {item.armor_class}</p>
                <p>Hit points: {item.hit_points}</p>
                <p>Hit dice: {item.hit_dice}</p>
                <p>Strength: {item.strength}</p>
                <p>Dexterity: {item.dexterity}</p>
                <p>Constitution: {item.constitution}</p>
                <p>Intelligence: {item.intelligence}</p>
                <p>Wisdom: {item.wisdom}</p>
                <p>Charisma: {item.charisma}</p>
                <p>Senses: {item.senses}</p>
                <p>CR: {item.challenge_rating}</p>
            </div>
        )
    }


  export default currentMonster;

これは私が現在持っているコード<p></p>です。モンスターのそれぞれの特殊能力と説明を表示するリストに別のコードを追加したいと思います。モンスターが複数の能力を持っている場合は、それらも表示します。

尋ねる前に私はしようとしました：

const [ability, setAbility] = useState([]);
setAbility(monster.special_abilities[0])
and then <p>{ability.name}</p>

これは1体のモンスターに対しては機能しますが、モンスターが複数の能力を持っている場合、私はそれらを見ることができません。モンスターの能力が2つ未満で[0][1][2]、ウェブサイトがクラッシュしたとログに記録した場合。

スタックオーバーフローでこれに似た質問が以前に行われている間、誰かがこれを手伝ってくれることを願っています。私はインスピレーションや答えを見つけることができませんでした。

敬具、

羊