React Native - How to display the data from an array items stored with AsyncStorage - react-native

Question

I working on a simple tasks app (To do App).
Currently the process of creating a new object with unique ID for each task (text typed in the input) is working correctly,
but I am not sure how to simply display the information 'text' from inside each object in a list object.
I created a List object to display but I think I'm using the wrong way or data to display what I want.
export default class Main extends Component {
state = {
newUser: '',
users: ['wagner'],
};
handleAddUser = () => {
//console.tron.log(this.state.newUser);
const newUser = this.state.newUser;
const { users } = this.state;
//console.tron.log(newUser);
// Check newUser (input) and create a new object
if (newUser !== '') {
this.setState(prevState => {
const id = uuid();
const newItemObject = {
[id]: {
id,
isCompleted: false,
text: newUser,
createdAt: Date.now(),
},
};
console.tron.log(newItemObject);
console.tron.log(newItemObject[id].text);
// store the new state on the array
const newState = {
...prevState,
newUser: '',
users: {
...prevState.users,
...newItemObject,
},
};
this.saveItems(newState.users);
return { ...newState };
console.tron.log(users);
});
}
};
saveItems = newItem => {
const saveItem = AsyncStorage.setItem('To Dos', JSON.stringify(newItem));
};
//console.tron.log(this.state.users);
render() {
const { users, newUser, newState } = this.state;
const { navigate } = this.props.navigation;
return (
<Container>
<Form>
<Input
placeholder="Add a new task"
value={newUser}
onChangeText={text => this.setState({ newUser: text })}
onSubmitEditing={this.handleAddUser}
/>
<SubmitButton onPress={this.handleAddUser}>
<Icon name="add" size={20} color="#eee" />
</SubmitButton>
</Form>
<List
data={users}
keyExtractor={user => user.id}
renderItem={({ item }) => (
<Task>
{item.text}
<Text>Test</Text>
</Task>
)}
/>
</Container>
);
}
}
My styled file where List and Task are built:
export const List = styled.FlatList.attrs({
showVerticalScrollIndicator: false,
})`
margin-top: 20px;
`;
export const Task = styled.View`
align-items: center;
margin: 0 20px 30px;
`;