My Fetch Get in React comes back as an empty array

import React from 'react'
import { useEffect, useState } from 'react'



function PokemonCard() {
useEffect(() => {
    fetch('https://pokeapi.co/api/v2/pokemon/charizard')
    .then(res => res.json())
    .then(setPokemon)
  },[])
  const [pokemon, setPokemon] = useState([])
  console.log(pokemon)
  
return (
<div>
    <h1>{pokemon.name}</h1>
      <img alt='yo' src={pokemon.sprites.front_default}></img>
      <h2>Type: {pokemon.types[0].type.name}</h2>
      <h2>Height: {pokemon.height}</h2>
      <h2>Weight: {pokemon.weight}</h2>
    </div>
  )
}


export default PokemonCard;

the code works in the initial load but after i refresh i get an error dont understand why its comes back as an empty array in the beginning