Transform function not working in styled components - reactjs

Question

I am trying to change the styled of "IconRadioButtonRound" component based on the "HiddenCheckBox" value.I am able to change the bakcground of "IconRadioButtonRound" with same prop i.e."checked" but not able to transform it. Please help me solve this!
Styled components:
export const HiddenCheckbox = styled.input.attrs({ type: 'checkbox' })`
transform: scale(8);
position: relative;
top: 40px;
left: 20px;
opacity: 0;
`;
export const IconRadioButtonRound = styled.button`
width: 63px;
height: 62px;
display: flex;
flex-direction: column;
justify-content: space-between;
border: ${props =>
props.checked ? '4px solid #daa520' : '1px solid #daa520'};
box-sizing: border-box;
border-radius: 50%;
transition: transform 500ms linear;
background: ${props => (props.checked ? 'rgba(66, 226, 248, 0.3)' : 'white')};
transform: translateY(${props => (props.checked ? '-15px' : '0')});
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
`;
Component where I am using it
<IconCheckBoxRoundButton>
<HiddenCheckbox
key={index}
name={item.itemName}
value={item.itemName}
onChange={e => handleAddOnItemChange(e)}
/>
<IconCheckBoxRound checked={item.isChecked}>
<CheckBoxIcon src={item.itemIconURL} />
</IconCheckBoxRound>
<InputLabel
for={item.itemName}
style={{ marginTop: '15px' }}
lineHeight="18px"
>
<CheckBoxIconName>
<PTSansText fontSize="18px" lineHeight="18px">
{item.itemName}
</PTSansText>
</CheckBoxIconName>
<CheckBoxIconName>
<PTSansText fontSize="16px">
<span>Rs. </span>
{item.itemPrice}
</PTSansText>
</CheckBoxIconName>
</InputLabel>
</IconCheckBoxRoundButton>