I have a reusable component that receives one of the 2 states according to the use case.
Im trying to apply css styles depending which state was provided. Why this does not work and apply only styles from the "status" state? It just ignore that "isVerified" state condition. And im using chakra ui.

type Props = {
  isVerified?: boolean;
  status?: "active" | "inactive" | undefined;
};


 export const TestIcon = ({
  status,
  isVerified,
}: Props): ReactElement => {
  return (
    <Icon
      backgroundColor={
        (status === "active" ? "green.50" : "dark.50") ||
        (isVerified ? "dark.800" : "dark.50")
      }
      borderRadius="full"
      boxSize="illustrationSize"
      fill={
        (status === "active" ? "green.500" : "dark.200") ||
        (isVerified ? "base.white" : "dark.200")
      }
    />
  );
};

>Solution :

I think it is due to status === "active" ? "green.50" : "dark.50"
it will always go to the false it the status is argument is false
I think it’s should be like

status === "active" ? "green.50" : isVerified ? "dark.800" :"dark.50" :"dark.50"

or do this as method with if else with what is your top priority
like:

if(status === "active") return "green.50";
if(isVerified) return "dark.800";
return  "dark.50"