switch statement evaluating incorrectly in styled-components

Question

I have a custom <Button /> component that properties like color, hasBorder, and outlined in its styled-component

If I do the if statement like this, it is evaluating the default case

border: ${({ theme, color, hasBorder, outlined }) => {
    switch (true) {
      case outlined && hasBorder && !color:
        return `1px solid ${theme.text}`;
      case outlined && hasBorder && color:
        return `1px solid ${color}`;
      default:
        return "1px solid transparent";
    }
}};

But if I do it like this it works fine

border: ${({ theme, color, hasBorder, outlined }) => {
    switch (true) {
      case outlined !== undefined &&
        hasBorder !== undefined &&
        hasBorder &&
        color === undefined:
        return `1px solid ${theme.text}`;
      case outlined !== undefined &&
        hasBorder !== undefined &&
        hasBorder &&
        color !== undefined:
        return `1px solid ${color}`;
      default:
        return "1px solid transparent";
    }
}};

I am not sure what is going on here, any idea ?