I an trying to complete this JSX/react challenge. the issue I'm facing is the function 'displayFact' in running a single time when the program is loaded and not onClick as it should. How can I solve this bug?

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'));