React i18n language object mapping

How do I iterate through the menu object items with react i18n? Here is an extract from the translation.json file: The desired outcome is to use .map(items) loop to output translations with <ul><li></li></ul>

{ "lang": "lv", "menu": { "index": "galvene", "food_menu": "menu", "about_us": "par mums", "delivery": "piegāde" } } 

App component, I wish to get the output in:

function App() { const { t, i18n } = useTranslation(); const changeLanguage = (language) => { i18n.changeLanguage(language) }; return ( <div> /* The output should be here */ </div> ); }