Reactjs 在react 中从外部 api 渲染列表

我正在try 呈现用户点击的一些信息.当点击时，用户将看到代码列表，他们只是获得了额外的信息. 让我们从头开始吧. 因此，首先我使用useState Hook来初始化选项. 然后我从外部API获取一些数据，将数据转换为json格式并更新选项.然后，我将每个选项中存储的数据映射到一个选项标记中，并在一个 Select 标记中返回这些选项.然后，我向SELECT标记添加了一个名为handleClick的事件处理程序.然后，我使用Filter获得具体的选项.问题是，当我试图显示信息但它没有显示时.我试着安慰它.记录它，它工作得很好，但当我试图将它显示在列表中时，没有出现任何结果.

以下是我的代码

import { useEffect,useState } from "react"


function Data() {

    //Intializing Options using the useState Hook
    const [options , setOption] = useState([])

    useEffect(() => {

        //Fetching the data
        fetch('https://api.n.exchange/en/api/v1/currency/')

        .then(response => response.json())
        .then(data =>
                setOption(data)
            )
    })

    function handleClick(event) {

        const selectedBase = options.filter(code =>
                code.code === event.target.value
        )
        return(

            <ul>
               {selectedBase.forEach(currency => <li>{currency.name}</li>)}
            </ul>


            )

    }

    return(
        <select onChange={handleClick}>
        <option select="true" hidden={true}>Select an Currency</option>
        {
            options.map(options =>
                <option key={options.code} value={options.code}>{options.code}</option>
            )
        }
        </select>
    )
}



export default Data