Given this response from a http request.

[{"_id":"Castanho","count":7,"state":[{"state":"rejected","count":1},{"state":"pending","count":4},{"state":"approved","count":2}]},

{"_id":"Preto","count":1,"state":[{"state":"pending","count":1}]},

{"_id":"Azul","count":1,"state":[{"state":"pending","count":1}]}]

export default function StatisticsDashboard(props) {
const [dataSt, setDataSt] = useState();

useEffect(() => {
    async function fetchData() {
        const res = await client.get("/statistics");
        const data=res.data;
        console.log(data);
        setDataSt(data);
        console.log(dataSt);
    }
    fetchData();
}, []);

Why doesnt set the DataSt with the request data? I even tried to create a aux const named data (on the code example) to see if worked.

Screenshot of the console.log output

The undefined is from the console.log(dataSt);