React styled component animation not working - css

Question

I am trying to create an animation for form textfield and label.
I want to be able to change the position of LabelText to top of the TextBox component.
Please let me know what I am missing on, My entered text and label are overlapping i.e. label is not animated.
Request help!
Styled components:
export const TextBox = styled.input`
display: flex;
width: 100%;
height: 2em;
border-radius: 5px;
border: none;
background: ${styles.backgroundGradient};
`;
export const LabelText = styled.label`
position: absolute;
top: 0;
left: 0;
font-size: 18px;
line-height: 16px;
pointer-events: none;
transition: 0.5s;
color: ${styles.formContentColor};
${TextBox}:focus ~ &,
${TextBox}:not([value=""]) ~ & {
top: -1.5em;
left: 0;
color: ${styles.formContentColor};
font-size: 20px;
}
`;
export const InputWrapper = styled.div`
position: relative;
width: 60%;
`;
Order of placement in components
<InputWrapper>
<LabelText>Product Name</LabelText>
<TextBox type="text" />
</InputWrapper>

Answer 1

I read through comment by #mosh feu and other answers on stackoverflow.
Detect if an input has text in it using CSS -- on a page I am visiting and do not control?
There are couple of approaches that can serve the purpose i.e. to check whether input field is empty or not drafting them below for future refrrence.
input:not(:placeholder-shown):
input:not([value=""]):
In my case input is value of TextBox.
export const LabelText = styled.label`
position: absolute;
top: 1.5em;
left: 0;
font-size: 18px;
line-height: 16px;
pointer-events: none;
transition: 0.6s;
color: ${styles.formContentColor};
${TextBox}:focus ~ &,
${TextBox}:not(:placeholder-shown) ~ & {
top: 0;
left: 0;
color: ${styles.formContentColor};
font-size: 16px;
}
`;