(ReactJs) - Cannot retrieve image in official-artwork

[2b32dn]

React is throwing an error whenever I try to retrieve the front_default image in official-artwork. I believe that there's a typo and it should official_artwork instead

The error: Main.jsx:11 Uncaught ReferenceError: artwork is not defined

{pokemon.map((pokemon) => (
        <>
          <h1>{pokemon.name}</h1>
          <img
            src={pokemon.sprites.other.official-artwork.front_default}
            placeholder={`${pokemon.name} Default Official Image`}
          />
          {console.log(pokemon.sprites.front_default)}
        </>
))}

[Naramsim]

You cant use dot notation with keys that contain dashes. Use [] notation