React - Как отобразить список из ключей массива объектов

Я новичок в 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.info(key);
        console.info(values);
    })
})

Но когда я пытаюсь применить его в реагирующем компоненте, я ничего не получаю, никакой ошибки.

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 задыхается от этого?