Animal Fun Facts - working code and why arrow function doesn't work?

Hi there, so here are my finished code for practice Animal Fun Facts

It works, but not if I use arrow function for displayFact function (line 26). Why is that? Thanks!

import { animals } from './animals';
import React from 'react';
import ReactDOM from 'react-dom';

const title = ''
const showBackground = false;
const background = (
  <img className='background' alt='ocean' src='/images/ocean.jpg' />
)

const images = []
for (const animal in animals) {
  images.push(
  <img 
  key={animal} 
  className='animal' 
  alt={animal} 
  src={animals[animal].image} 
  ariaLabel = {animal} 
  role='button'
  onClick={displayFact} />
  )
  }

function displayFact(e) {
// const displayFact = e => {
  const animal = e.target.alt
  const index = Math.floor(Math.random() * animals[animal].facts.length)
  const fact = animals[animal].facts[index]
  console.log(fact)
  document.getElementById('fact').innerHTML = fact;
}

const animalFacts = (
  <div>
    <h1>
    {title === '' ? 'Click an animal for a fun fact' : title}
    </h1>
    {showBackground === true && background}
    <p id ='fact'></p>
    <div className = 'animals'>
    {images}
    </div>
  </div>
)


ReactDOM.render(
  animalFacts,
  document.getElementById('root')
);

Because you call the function before you define it. That works for the traditional syntax due to hoisting, but not for const variables.