Вывод на страницу json после использования promise

Изучаю ReactJS совсем недолго столкнулся с такой задачей. Имитируя получение данных с бэкэнда, имея такой файл data.json, "valid": true, "timestamp": 1582195447, "base": "USD", "rates": { "AED": 3.67338, "AFN": 77.8079 } таким образом

import data from './data.json';

function App1(){
    const promise = new Promise(
        (resolve, reject) =>{
            setTimeout(()=>{
                console.log('Prepearing...');
                resolve(data)
            }, 2000)
        }
    )
    promise.then(clientData =>{
        console.log('Promise resolved', clientData);
        
    })
    
    return(
        <div>
            <ul>
                 
            </ul>
              
        </div>
    )
}

мне нужно выводить всю информацию не в консоль, а на саму страничку, подскажите как это сделать(с этой самой задержкой как и в консоли) Вывести надо списком или таблицей. После прочтения статей мне пришло в голову такое решение, но и оно не работает так как мне нужно

import data from './data.json';
import React, {useState, useEffect} from 'react';

function App1(){
    const [state, setState] = useState(data);
    const promise = new Promise(
        (resolve, reject) =>{
            setTimeout(()=>{
                console.log('Prepearing...');
                resolve(state);
            }, 2000)
        }
    )
    promise.then(clientData =>{
        console.log('Promise resolved', clientData);
        setState(clientData);
    })
    
    return(
        <div>
            <ul>
                {JSON.stringify(state.rates,null,2)} 
            </ul>
              
        </div>
    )
}

export default App1;

Подскажите что именно я делаю не так. Желательно решение в лоб с пояснением