Let's say I wanted to fetch data from a website, and the link to that website is http://cookiestats.net/cookies, and the data on that link is this:

{"cookie-stats": {"eating": 1, "eaten": "6"}, "people-eating": {"current": 3, "total": "6"}}

What am I doing wrong?

export const getStaticProps = async () => {
    const res = await fetch('http://cookiestats.net/cookies');
    const data = await res.json();
    
    return{
        props: {cookies: data}
    }
}

const Cookies = ({ cookies }) => {
    return (
        <div>
            <h1>Cookie Data</h1>
            {Object.keys(cookies).map(cookies => (
                <div key = {cookies.cookie-stats}>
                    <a>
                        <h3>{cookies.eating}</h3>
                    </a>
                    </div>
            ))}
        </div>
    );
}

export default Cookies;