我是React新手，但不是Javascript新手。
我有一个如下所示的JSON：

[
 { "Environments": ["DEV", "QA", "PROD"] },
 { "Products": ["Product A", "Product B", "Product C"] },
 { "Releases": [1,2,5] }
]

我想在HTML列表中呈现一个列表：

<ul>  
 <li>Environments</li>
 <li>Products</li>
 <li>Releases</li>
</ul>

我使用以下（丑陋的）Javascript迭代列表以获得键：

var topics = [
    { "Environments": ["DEV", "QA", "PROD"] },
    { "Products": ["Product A", "Product B", "Product C"] },
    { "Releases": [1,2,5] },
]

topics.map(topic => { 
    Object.entries(topic).map( ([key, values]) => { 
        console.log(key);
        console.log(values);
    })
})

但是当我试着把它应用到一个React组件中时，我什么也没有得到，没有错误。

export default function() 
{
    const topics = //...topics from json
    
    return (
        <>
        <h1>Topics</h1>
        <ul>
            
            {topics.map(topic => { Object.entries(topic).map( ([key, values]) => { 
                <li>key: {key}</li>
            })})}
        </ul>
        </>
   )
}

可能（应该）有一种更简单的方法来呈现我想要的数据，但为什么React会在这方面感到窒息呢？