Background-image url is rendered incorrectly

[ayelet-hb]

Hi :)
i came across a unusual problem

const ImageContainer = styled.div<{
profileImageUrl: string;
}> border-radius: 50%; width: 64px; height: 64px; display: flex; justify-content: center; align-items: center; ${is('profileImageUrl')
background-position: center;
background-size: cover;
background-image: url(${props => props.profileImageUrl});
} ;

in the inspect you could see that it would render "https: background-position: center"

the fix i found for this is in the handleFunctions
change the string check
if (typeof output === "string" && output.includes(':') && output.indexOf('https://') === -1) {
css += output;
}

do you think it's the best solution ?

thanksss