en React, la variable no es vinculante en dos sentidos.

La variable en la que se hizo clic en su función solo será true en la función en sí, pero no fuera de la función.

Entonces, en este caso, debe usar useState para que el estado en el que se hizo clic se vuelva a representar nuevamente con el booleano actualizado

 const [clicked, setClicked] = useState(false) const clickHandler = () => { setClicked(true) }

para que su variable seleccionada se actualice, por lo tanto, el css se actualizará nuevamente.

para obtener más referencias con useState , puede consultar su documentación https://reactjs.org/docs/hooks-state.html

Deberá usar el estado en lugar de la variable simple en la que se clicked .

 const [clicked, setClicked] = useState(false);

Llame a la función setState dentro de la función clickHandler en lugar de establecer clicked en true .

 setClicked(true);

Cuando usa React, necesita un estado para tener una actualización de DOM. Eso se bifurcaría para usted (no olvide importar useState en la parte superior de su archivo):

 const [clicked, setClicked] = useState(false); const [src, setSrc] = useState("https://i.ibb.co/9YQV2qq/kisspng-fortune-cookie-biscuits-bakery-drawing-clip-art-fortune-cookies-5b0ec5e3013c23-3980054715276.png"); //change image on fortune cookie click const clickHandler = (e) => { setSrc("https://i.ibb.co/cksx7kr/kisspng-fortune-cookie-drawing-clip-art-fortune-cookie-5b237469209879-9079770415290502171335.png"); setClicked(true); }; console.log(clicked); return ( <div className="App"> <button onClick={clickHandler}> <img className="cookie" src={src} /> </button> <div className="fortuneMessage" style={{ visibility: clicked ? "visible" : "hidden" }} > {fortune} </div> </div> );