Not able to type in the styled input component react js

Question

I have created styled component to input the text. I am not able to type into the same when I render it. Please let me know what am I missing on.I tried console.logging on onChange.It seems the event is not getting fired. Component:

export default function Containers() {
  const [supplier, setSupplier] = useState("");

  const onChange = e => {
    setSupplier(e.target.value);
  };

  return (
    <>
      <Background />
      <CenterAlignedColumnContainer>
        <CompleteWidthDivider />
        <InputBox
          type="text"
          value={supplier}
          onChange={e => onChange(e)}
          name="supplier"
        />
        <PartialWidthDivider />
        <GradientButton>
          <SacramentoText fontSize="36px">Submit</SacramentoText>
        </GradientButton>
      </CenterAlignedColumnContainer>
    </>
  );
}

Styled component

export const InputBox = styled.input`
  display: flex;
  width: 45%;
  height: 2em;
  margin-top: 1em;
  background: linear-gradient(
    360deg,
    #b0a7e6 0%,
    rgba(176, 167, 230, 0) 169.23%
  );
  border-radius: 5px;
`;

Answer 1

Check this working example of your code - https://codesandbox.io/s/upbeat-euler-smcjf?file=/src/index.js

Looks like this is not a problem with styled-components, check the component CenterAlignedColumnContainer