React Functional setState vs object difference - reactjs

Question

sDoing a React course I faced with a strange situation deleting object from state. The course author used non-functional state update but I tried to make it functional and got an error. It would be great if you explain the principal difference in those two approaches.
To begin with state looks so:
{
items: {item11 : {_item1Props_}, item2: {item2Pros}},
order: {_some_suff_in_the_cart}
}
The following code performed for deleting item2:
deleteItem = key => {
const items= {...this.state.items, [key]: null};
this.setState({items});
}
All the components which use state updated with no errors (cart, view and so on).
Trying to make setState functional I got error in render methods of other components with the following code:
deleteItem = key => {
this.setState(prevState =>(
{
items:
{...prevState.items, [key]: null}
}
));
}
Even more the following code failed as well:
deleteItem = key => {
const items= {...this.state.items, [key]: null};
this.setState(prevState => ({items}));
}
So, there must be a principal difference in those methods?
Thank you in advance!
UPD components code:
There are two components using state:
TypeError: _this$props$details is null
Comes from the component which renders item:
class Item extends Component {
render() {
const {name, desc, price, status, image} = this.props.details;
const isAvailable = status === "available";
return (
<li className="menu-item">
<img src={image} alt={name}/>
<h3 className="item-name">
{name}
<span className="price">{formatPrice(price)}</span>
</h3>
<p>{desc}</p>
<button
disabled={!isAvailable}
onClick={()=>{this.props.addToOrder(this.props.index)}}
>
{isAvailable ? "Add To Cart" : "Sold Out"}
</button>
</li>
);
}
}
and
TypeError: this.props.item is null
from the component which is used to edit items:
class EditItemForm extends Component {
handleChange = (e) => {
const updatedItem = {
...this.props.item,
[e.target.name]: e.target.value
};
this.props.updateItem(this.props.index, updatedItem);
}
render() {
return (
<div className="item-edit">
<input
name="name"
type="text"
onChange={this.handleChange}
value={this.props.item.name}
/>
<input
name="price"
type="text"
onChange={this.handleChange}
value={this.props.item.price}
/>
<select
name="status"
value={this.props.item.status}
onChange={this.handleChange}
>
<option value="available">Available</option>
<option value="unavailable">Sold Out</option>
</select>
<textarea
name="desc"
type="text"
onChange={this.handleChange}
value={this.props.item.desc}
/>
<input
name="image"
type="text"
onChange={this.handleChange}
value={this.props.item.image}
/>
</div>
);
}
}
UPD2:
I logged the render() methods of mentioned components I found out that object version removes the property at all, so the null is not passed to the components meanwhile the functional preserves the null value when state is passed to the components.