Image in NextJS does not allow template literals inside src when deploying on vercel

I have a userdropdown menu that I want to show the picture of the client that authenticated. I use nextAuth to authenticate. I can see the picture of the user and name of the user turns well with useSession().

I show the picture of the user in localhost without problem. Here how I show it with Image tag.

  <li className="py-1 px-3 hover:underline leading-8 flex">
              <Image
                width={40}
                height={40}
                className="mr-3"
                src={status === "authenticated" ? session.user.image : profile}
                alt="img"
              />
              <span className="ml-3">User</span>
            </li>

But when I sent it for production to vercel, it throw error and does no work like in localhost.
Here the error