React js styled component input animation not working - css

Question

I am trying to create an form with input fields.I am trying to set up the floating labels for the inputs. The floating label works for the second field and not the first field. Please help me understand what am I missing on..
Here is code sandbox link :Please refer to productDetails component..
https://codesandbox.io/s/pensive-water-pojf8?file=/src/StyledComponents/FormInputStyles/index.js:199-1554
Form components
<InputWrapper>
<TextBox />
<LabelText>Product Name</LabelText>
</InputWrapper>
<InputWrapper>
<TextParagraph />
<LabelText1 for="description">Product Name</LabelText1>
</InputWrapper>
styled components: Where I am trying to make the input label floating
export const TextBox = styled.input`
display: flex;
width: 100%;
height: 2em;
border-radius: 5px;
border: none;
background: ${styles.backgroundGradient};
margin-top: ${props => props.marginTop || "1.5em"};
&:focus {
outline: none;
border: 2px solid #6e5dcc;
}
`;
export const LabelText = styled.label`
position: absolute;
top: 1.5em;
left: 0;
font-size: 18px;
line-height: 16px;
pointer-events: none;
transition: 0.5s;
color: ${styles.formContentColor};
${TextBox}:focus ~ &,
${TextBox}:not([value=""]) ~ & {
top: 0;
left: 0;
color: ${styles.formContentColor};
font-size: 16px;
}
`;
export const TextParagraph = styled.input`
display: flex;
width: 100%;
height: 7em;
border-radius: 5px;
border: none;
text-align: left;
appearance: none;
background: ${styles.backgroundGradient};
margin-top: ${props => props.marginTop || "1.5em"};
&:focus {
outline: none;
border: 2px solid #6e5dcc;
}
`;
export const LabelText1 = styled.label`
position: absolute;
top: 1.5em;
left: 0;
font-size: 18px;
line-height: 16px;
pointer-events: none;
transition: 0.5s;
color: ${styles.formContentColor};
${TextParagraph}:focus ~ &,
${TextParagraph}:not([value=""]) ~ & {
top: 0;
left: 0;
color: ${styles.formContentColor};
font-size: 16px;
}
`;