словарь API. как сделать чтоб вместо ошибки на экране при вводе абракадабры в input показывало на экране данные с обьекта?

создаю словарь c API:

и при вводе абракадабры в input получаю такую ошибку :

и понятно почему. так как .map() работает только в массивах.а тут высккакиает обьект. вопрос : как реализовать так чтоб вместо ошибки на экране при вводе абракадабры показывало на экране данные с обьекта?

РЕШЕНИЕ : просто обернуда весь код в if-else :

    if (Array.isArray(wordData)) {
//CODE
    } else {
        return <div>
            <p> {wordData.title} </p>
            <p> {wordData.message} </p>
            <p> {wordData.resolution} </p>

        </div>
    }

CODE:

    const [wordData, setWordData] = useState([])
    const [btnVal, setBtnVal] = useState('welcome');

    const LINK = `https://api.dictionaryapi.dev/api/v2/entries/en/${btnVal}`
    useEffect(() => {
        try {
            async function data() {
                await fetch(LINK, {
                    method: 'GET'
                })
                    .then(response => response.json())
                    .then(elem => setWordData(elem))
            }
            data()
        } catch (err) {
            console.log('Found some errors');
        }
    }, [LINK])
    const getInputValue = (event) => {
        const inputValue = event.target.value;
        setInpValue(inputValue)
    }
    if (btnVal === null) {
        alert('Not Found')
    } else {

        const generalWord = wordData.map(el => el.word)
        console.log(generalWord);
        // if (wordData === Object ) {
        //     // alert('Not Found')
        //        return <TemplateNoWord  title={wordData.title}/>  //NOT WORKING
        //     // return<p>{wordData.title}</p>
        //         }
        const audio = wordData.map( el => el.phonetics.map(el => el.audio))
        console.log(audio);

        const phonetic = wordData.map(el => el.phonetic)

        const genFilteredWord = generalWord.filter((e, i) => generalWord.indexOf(e) === i)

        const GetSource = wordData.map(el => {
            let c = el.sourceUrls
            return <div><a className={home.fs} href={c}>{c}</a></div>
        })
        const GetMeanings = wordData.map(el => {
            const verb = el.meanings.map(elem => {
                //noun, verb, interjection
                const partOfSpeech = elem.partOfSpeech;
                const definitions = elem.definitions.map(el => <TemplateDefin defin={el.definition} />)
                const synonyms = elem.synonyms.map(el => <TemmplateSynAnt synon={el} />)
                const antonyms = elem.antonyms.map(el => <TemmplateSynAnt anton={el} />)
                return (
                    <>
                        <TemplateGeneral part={partOfSpeech} def={definitions} synonym={synonyms} antonym={antonyms} />
                    </>
                )
            })
            return verb
        })

        return (
            <>
                <div div className={home.containerWrap} >
                    <div className={home.wrapper}>
                        <div className={home.imageLogo}>
                            <img src={logo} alt='logo' />
                        </div>
                        <div className={home.wrapRightSide}>
                            <div className={home.fonts}>
                                <div className={home.font}>Sans Serif</div>
                                <img src={down} alt='down' />
                            </div>
                            <div className={home.line}></div>
                            <div className={home.wraptheme}>
                                <div className={home.theme}>
                                    <div className={home.circle}></div>
                                    <div className={home.rectangle}></div>
                                </div>
                                <div className={home.imageMoon}>
                                    <img src={moon} alt='moon' />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className={home.search}>
                        <input onChange={getInputValue} className={home.searchInput} type='requared' placeholder='Search for any word…' />
                        <div className={home.inputImg}>
                            <button className={home.btn} onClick={() => setBtnVal(inpValue)}>
                                <img src={search} alt='search' />
                            </button>
                        </div>
                    </div>
                    {/* <ApiContext inpValue={btnVal}/> */}
                </div>

                <div className={home.container}>
                    {/* {generalWord} */}
                    <div className={home.word}>
                        <h1 className={home.genWord}>{genFilteredWord}</h1>
                    </div>
                    <div className={home.phonet}>
                        <p className={home.phonetGen}>{phonetic}</p>
                    </div>
                    <div>
                        <audio controls>
                            <source src={audio} type='audio/mp3' />
                            </audio>
                    </div>
                    <div className={home.meaning}>
                        {GetMeanings}
                    </div>
                    <div className={home.source}>
                        <div className={home.sourceFilter}>  <span className={home.fs}>{GetSource}</span> </div>
                    </div>
                </div>
            </>
        )
    }
}