flatlist doesn't dislays any content - react-hooks

Question

Good afternoon, I'm trying to make flatlist to display a number of objects from an API but for some reason, this flatlist seems not to work as I expected it to do, Wonder if anyone can find what's the issue here.
The flatlist was working properly before I import the API, because I made a custom set of data and it showed those without any issue but after I imported API like this flatlist has stopped working.
const [Accounts, setAccounts] = useState([]);
useEffect(() => {
const getDataList = async () => {
await axios
.get(
"API LINK" //I changed the API access link for security reasons but I can get log for response and Accounts in useState hook and it works properly!
)
.then((response) => {
//console.log(response.data, "loge response");
setAccounts(response.data);
})
.catch((error) => {
console.log(error, "loge error");
});
};
getDataList(); //we can put function out of the useEffect but you need to call one in order to run the function(getDataList) once in the code by useEffect.
}, []);
Flatlist code is below:
<FlatList
style={StyleSheet.container}
data={Accounts}
keyExtractor={(Accounts) => Accounts?.id}
renderItem={({ item }) => {
return (
<>
<View style={styles.container}>
<Text style={styles.items}>{item?.games}</Text>
<TouchableOpacity style={styles.price}>
<Text>{item?.price}</Text>
</TouchableOpacity>
</View>
</>
);
}}
></FlatList>
</>
I tried to get a log from Accounts and it shows all of the information that it gets from API but for some reason, without any errors, flatlist doesn't display any items.
This is a sample of the API data:
{
"id": 115,
"sellerId": 2,
"price": 105000,
"region": "2",
"isAvailable": true,
"plus": null,
"games": "Demon's Souls Digital Deluxe Edition PS5",
"view": 17,
"createdAt": "2021-02-26T11:17:10.000Z",
"sellers": {
"username": "ben"
}
},
{
"id": 116,
"sellerId": 3,
"price": 150000,
"region": "1",
"isAvailable": true,
"plus": true,
"games": "PES 2021,Assassin's Creed Valhalla ,WWE 2K20",
"view": 6,
"createdAt": "2021-02-26T11:17:11.000Z",
"sellers": {
"username": "moeindana"
}
In addition, these are the styling that currently I'm using:
const styles = StyleSheet.create({
container: {
borderRadius: 10,
borderWidth: 0.5,
borderColor: "black",
alignItems: "center",
maxWidth: "80%",
paddingTop: 20,
width: "90%",
backgroundColor: "gray",
marginLeft: 30,
marginTop: 26,
minHeight: 400,
paddingBottom: 100,
},
items: {
alignItems: "center",
maxWidth: "80%",
justifyContent: "center",
},
title: {
fontSize: 32,
},
price: {
fontSize: 15,
padding: 17,
paddingBottom: 20,
fontWeight: "bold",
borderRadius: 10,
borderColor: "black",
borderWidth: 0.5,
marginTop: 20,
top: 300,
position: "absolute",
},
}