I want to remove the right margin ('mr-5') when the image isn't rendered--but my conditional fix doesn't seem to be working. The margin is never removed--no errors, it just always stays:

import portfolioImage from './avatar.jpg';

<div className={`flex items-end ${portfolioImage ? 'mr-5' : ''}`}>
    <div className="hidden md:block">
       {portfolioImage && <Image src={portfolioImage} alt="Profile Picture" className="w-40 h-40 rounded-md border border-gray-300" />}
    </div>
</div>