TextInput `left` and `right` elements are not visible

Current behaviour

When the textinput has right or left element, it takes up the space which is required but doesn’t show anything.

Expected behaviour

It should show the react element which is provided.

Code sample

https://snack.expo.io/@aashishdhawan/textinput?name=TextInput&description=https%3A%2F%2Fcallstack.github.io%2Freact-native-paper%2Ftext-input.html&code=import * as React from 'react'%3B import { TextInput } from 'react-native-paper'%3B const MyComponent %3D () %3D> { const [text%2C setText] %3D React.useState('')%3B return ( <TextInput label%3D"Email" value%3D{text} onChangeText%3D{text %3D> setText(text)} %2F> )%3B%0A%7D%3B%0A%0Aexport%20default%20MyComponent%3B&dependencies=react-native-paper

I have added a expo snack as well

Screenshots (if applicable)

What have you tried

I tried adding some zIndex to the container, but doesn’t work

Your Environment

software	version
react-native-paper	4.0.1
node	v12.16.3
npm or yarn	1.22.4
expo sdk	38

[YahyaBagia]

You have to pass <TextInput.Icon name={"ICON-NAME"}/> in the left and right props of TextInput.

import * as React from 'react';
import { View } from 'react-native'
import { TextInput } from 'react-native-paper';

const MyComponent = () => {
  const [text, setText] = React.useState('');
 const element = <TextInput.Icon name="lock-outline" />
  return (
    <TextInput
      label="Email"
      mode='outlined'
      style={{ backgroundColor: 'transparent' }}
      value={text}
      onChangeText={text => setText(text)}
      right= {element}
      left={element}
    />
  );
};

export default MyComponent;

[rizshivalli]

How do i add text to right and left? it only seems to be working with <TextInput.Icon name={"ICON-NAME"}/>