UI not updating after userReducer changes state - reactjs

Question

I`m trying to use a reducer function to update state. I have a state variable, phones, which is an array of phone objects. When the user clicks a button, I want the quantity property of the phone object to increase. Quantity does get increased, but there's no change in the UI.
Here`s my code:
const initialState = {
phones: [...Phones]
};
const reducer = (state, action) => {
if (action.type === "increase") {
const newPhones = state.phones.map(phone => {
if (phone.id === action.payload) {
return { ...phone, quantity: phone.quantity + 1 };
}
return phone;
});
return { ...state, phones: newPhones };
}
};
const Cart = () => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div className="cart_div">
<h1>Your Bag</h1>
{Phones.map(phone =>
<PhoneListItem
key={phone.id}
dispatch={dispatch}
state={state}
{...phone}
/>
)}
</div>
);
};
const PhoneListItem = ({ name, price, img, quantity, dispatch, id, state}) => {
return (
<div className="phone_row">
<img className="phone_img" src={img} />
<div className="phone_info_div">
<h4>
{name}
</h4>
<h4 className="price">
{price}
</h4>
</div>
<div className="phone_amount_div">
//user clicks on button to increase phone quantity
<button className="increase_button" onClick={() => dispatch({ type: "increase", payload: id })}>
<Icon icon="akar-icons:chevron-up" />
</button>
<p className="phone_amount_para">{quantity}</p>
<button className="decrease_button" onClick={() => dispatch({ type: "decrease", payload: id })}>
<Icon icon="akar-icons:chevron-down" />
</button>
</div>
</div>
);
};

Answer 1

useReducer will return the whole state instead of a state slice.
You already get the state by array destructuring, but you didn't use it.
const [state, dispatch] = useReducer(reducer, initialState);
{state.Phones.map(phone => {
return <PhoneListItem
key={phone.id}
dispatch={dispatch}
state={state}
{...phone}
/>
})}