React-Native, React-Navigation, Hooks: Rendering issue when going back

I want to re-render my Screen A state when I come back from my Screen B. I am using hooks with react-navigation.

// SCREEN A
// This is the callback method I will send through my navigation 
const [cartProducts, setCartProducts] = useState(Global.cart); // I have a global cart variable which saves the products in cart.
const updateCart = (cartProducts) => {
  setCartProducts(cartProducts);
};

I have multiple products displayed on the screen and each time an id is sent to product detail screen to fetch the details from server and display it on the detail screen. If the user presses the add to cart option on product detail screen the product is saved to the Global.cart and then the data is sent back to Screen A.

// This is the callback method which will pass product ID and updateCart callback
// to product detail screen 
const handleItemClick = () => {
  navigation.navigate("All Products", {
    screen: "ProductDetails",
    params: { productId: product.id, updateCart },
  });
};

Now when the product is added to cart and on pressing back on product detail screen, I invoke the updateCart callback and sent the updated cart list.

// SCREEN B (PRODUCT DETAIL SCREEN) 
onPress={() => {
  route.params.updateCart(Global.cart);
  navigation.goBack();
}}

Now all of this works perfectly except the updateCart callback which receiving the updated cart list doesn't render the screen again, the setCartProducts(cartProducts) doesn't renders the screen whole again. What am I doing wrong?

When I added console.log lines to updateCart callback method and to Screen A to check whether the screen renders again or not. It works smoothly shows no glitches. I don't understand why?