Field as textarea not working with styled component.

[BashisthaSudeep]

I'm using Formik along with styledComponents. I'm having trouble with textarea. Below is the snippet of my generic input component. The issue with this is, it doesn't display the values for textarea. Works well with other input type.

export const FormikField = styled(Field)`
  display: block;
  width: 100%;
  border: 2px solid ${theme.colors.greyLight};
  border-radius: 5px;
  color: ${theme.colors.textGrey};
  padding: 0.65rem 1rem;
  outline: none;
  font-family: 'Poppins';
  font-size: 0.9rem;
  font-weight: 400;

  ::placeholder {
    color: ${theme.colors.grey2};
  }
`

export const FormikInput: React.FC<InputProps> = (props) => {
  const { name, label, placeholder, as, rows, error, touched } = props

  return (
    <FieldContainer error={!!error}>
      <FormLabel>{label}</FormLabel>
      <FormikField
        as={as}
        name={name}
        placeholder={placeholder}
        rows={rows}
      />

     // Using Field component directly works. 
     <Field as={as}
        name={name}
        placeholder={placeholder}
        rows={rows} />
      {
        error && touched && ( <Error>{error}</Error> )
      } 
    </FieldContainer>
  )
}

Output for the above snippet: