props change does not re-render child component - reactjs

Question

im passing a variable and two functions that changes the state of the variable as props in a child component. when i execute the functions the variable changes its state but the child component does not re-render, knowing that im using the same code in another class that calls the same child component and its working fine.
Here's the functions and the render of the child component.
onRowClickHandle = async (product) => {
BlockTimer.execute(() => {
this.props.onViewProductScreen({ product });
}, 1000);
};
async componentDidMount(){
await this.fetchReadLaterBooks();
}
async fetchReadLaterBooks(){
const user = await AsyncStorage.getItem('username');
const isLoggedIn = await AsyncStorage.getItem('isLoggedIn');
if (isLoggedIn == 1) {
await fetch(Config.backendAPI+`/readlater.php?username=${user}&test=1&select`)
.then((response) => {
return response.json();
})
.then((json) => {
if(json.length != this.state.prodList.length){
json.map((product, index) => {
this.state.prodList.push(product.id)
});
this.setState({
prodList:this.state.prodList,
isLoading:false,
});
}
this.forceUpdate();
})
.catch((error) => alert(error));
}
}
removeReadLater = async (id) => {
const user = await AsyncStorage.getItem('username');
this.setState({
prodList:this.state.prodList.filter((productId) => productId !== id),
});
await fetch(Config.backendAPI+`/readlater.php?username=${user}&idDoc=${id}&delete`)
.then((response) => response.json())
.catch((error) => alert(error));
}
addReadLater = async (id) =>{
try{
const user = await AsyncStorage.getItem('username');
//insertion dans la liste actuelle des readlater.
const joined = this.state.prodList.concat(id);
this.setState({
prodList:joined,
});
//insertion dans la base
await fetch(Config.backendAPI+`/readlater.php?username=${user}&idDoc=${id}&insert`)
.then((response) => response.json())
.catch((er) => alert(er));
}catch(error){
console.log(error);
}
};
renderItem = ({ item }) => {
return (
<ProdList
addReadLater={this.addReadLater}
removeReadLater={this.removeReadLater}
readLaterBooks={this.state.prodList}
item={item}
onRowClickHandle={this.onRowClickHandle}
/>
);
};
render() {
const {
theme: {
colors: { background, text,
dark: isDark },
},
} = this.props;
if(!this.state.isLoading){
return (
<View style={{flex:1 ,backgroundColor:background}}>
<FlatList
data={this.props.products}
renderItem={this.state.prodList ? this.renderItem : null}
/>
</View>
);
}else{
return <LogoSpinner fullStretch />;
}
}
}