在 React 中将状态集数组作为 prop 传递时遇到问题

Question

我正在从 API 获取数据，该 API 返回一个对象，该对象具有包含一项的饮料对象数组。我在将数组传递给子组件函数时遇到问题。

<Modal.Body className={'d-flex flex-row'}>
        <CocktailDetailsList drinks={cocktailDetails?.drinks[0]}/>
</Modal.Body>

我从 useEffect() 调用 API 并在 useState 常量内设置 api 返回的值。

    const [cocktailDetails, setCocktailDetails] = useState<CocktailDetails>();
    useEffect(() => {
        axios.get('https://www.thecocktaildb.com/api/json/v2/my_key/lookup.php', {
            params: {
                i: props.id
            }
        }).then(res => setCocktailDetails(res.data))
            .catch(err => console.log(err));
    });

如何将数组饮料传递给子组件？