[BUG] Input border color doesn't change when using custom color in TailwindCSS

[jalalmanafi]

Input border color doesn't change when using custom color in TailwindCSS, here is my code:

<OTPInput
      maxLength={6}
      containerClassName="flex items-center"
      render={({ slots }) => (
        <div className="flex gap-2">
          {slots.map((slot, idx) => (
            <div
              key={idx}
              className={`
              py-2.5 px-4 min-h-14 min-w-16 text-base
              flex items-center justify-center
              border rounded-xl
              ${slot.isActive ? "border-[#4DBDC6]" : "border-[#DFE5EA]"}
              ${
                slot.char ? "bg-[#EDF8F9] border-[#4DBDC6]" : "bg-[#F7F8FA]"
              }
            `}
            >
              {slot.char || ""}
            </div>
          ))}
        </div>
      )}
    />

Version of the library: ^1.4.2

Expected Behavior

It should change the border color when using custom color with slot.char

Current Behavior

It doesn't change border color when using custom color

Here is the video also, I was expecting like when input has value it should has ssame style with active input , maybe I am doing something wrong, but if I use tailwind builting color class it works, I tested it also but it is not in the video

Screen.Recording.2025-08-05.at.09.20.26.mov