in React, the variable is not two way binding.

The clicked variable in your function will only get to be true in the function itself but not outside the function

So in this case you need to use useState so that the clicked state will be re-rendered again with updated boolean

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

so that your clicked variable will be updated, hence the css will be updated again.

for more reference with useState can check their documentation https://reactjs.org/docs/hooks-state.html

You'll need to use state instead of the plain clicked variable.

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

Call the setState function inside the clickHandler function instead of setting clicked to true.

setClicked(true);

When you are using React, you need a state in order to have a DOM update. That would fork for you (don't forget to import useState at the top of your file) :

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