Fail to update state React [duplicate]

I’m following a tutorial to get Items from localStorage, this is the code:

export const CartProvider = ({ children }) => {
  const [cartItems, setCartItems] = useState([]);
  // Load cart items from local storage on component mount
  useEffect(() => {
    const storedCartItems = JSON.parse(localStorage.getItem("cartItems")) || [];
    console.log('Loaded cart items from localStorage:', storedCartItems);
    setCartItems(storedCartItems);
    console.log('Cart items:', cartItems);
  }, []);
  // Save cart items to local storage whenever cartItems state changes
  useEffect(() => {
    localStorage.setItem("cartItems", JSON.stringify(cartItems));
  }, [cartItems]);

So the problem is storedCartItems has the Items in it but the cartItems not get updated, it log out as blank[]. Please help.

Here is the console logging