My Fetch Get in React comes back as an empty array

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

function PokemonCard() {
useEffect(() => {
    .then(res => res.json())
  const [pokemon, setPokemon] = useState([])
return (
      <img alt='yo' src={pokemon.sprites.front_default}></img>
      <h2>Type: {pokemon.types[0]}</h2>
      <h2>Height: {pokemon.height}</h2>
      <h2>Weight: {pokemon.weight}</h2>

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