Цикл по объекту, но мой html не отображается, отображается только console.log?

Question

Мой console.log отображается, но <li>{menuNames1[key]}</li> не отображается, и я не уверен, почему. Кто-нибудь знает ...?

let allMenus = ["Admin", "Analyst", "Apps"]
let menuNumbers = [[1, 6, 11, 5, 18, 19, 4, 14, 16], [17, 3, 2, 12, 13], [9, 7, 10, 15, 8]];
let menuNames1 = {1: "Approvals", 2: "Publish", 3: "Manage", 4: "Access", 5: "Create", 6: "Create2", 7: "one", 8: "two", 9: "three", 10: "four", 11: "meta", 12: "Reports", 13: "stories", 14: "Categories", 15: "blah", 16: "help", 17: "blah2", 18: "Images", 19: "Reporting"}

return (

<div>
                    {allMenus.map((menu, idx) => (
                            <div>
                                <p>{menu}</p>
                                <ul>
                                    {menuNumbers.map((num, i) => {
                                        if (i === idx) {
                                            return menuNumbers[i].map(number => {
                                                Object.keys(menuNames1).forEach(key => {
                                                    if (number == key) {
                                                        console.log(menuNames1[key], 'heyyyyyyyyyyyyyy')
                                                        return <li>{menuNames1[key]}</li>
                                                    }
                                                })
                                            })
                                        }
                                    })}
                                </ul>
                            </div>
                        )
                    )}
                </div>
)