Estoy tratando de completar este desafío JSX/react. el problema al que me enfrento es que la función 'displayFact' se ejecuta una sola vez cuando el programa está cargado y no en Click como debería. ¿Cómo puedo solucionar este error?

 import { animals } from './animals'; import React from 'react'; import ReactDOM from 'react-dom'; const title = '' 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} aria-label={animal} role='button' onClick={displayFact([animal])}/>) }; function displayFact(e) { const targetAni = e const number = Math.floor(Math.random() * animals[e].facts.length); const funFact = animals[e].facts[number] document.getElementById('fact').innerHTML = funFact; } const animalFacts = ( <div> <h1>{!title ? 'Click an animal for a fun fact' : ''}</h1> {background} <div className='animals'> {images} </div> <p></p> </div> ); ReactDOM.render(animalFacts, document.getElementById('root'));