NextJS 14 component is throwing hydration error

I have this <Card> component that uses NextJS 14.2 <Image> component. The card receives the image src as a prop, then passes it to the <Image> component, like this:

const Card = ({ title, text, link, image, alt }) => {   return (      ...<Image         src={`/images/${image}.jpg`}         alt={alt}         layout="intrinsic"         width={150}         height={150}         className="card-img-top"      />      ...   )}

When I first npm run dev it, I get the following error message:

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Strangely enough, if I make any changes to the code, NextJS hot reloads the code and then it magically (to me!) works.

I think there's something to do with the variable in the src prop but I don't know how to fix it. I've tried "use client" with no success. I might need to use getStaticProps?