Почему атрибут value отображает входные данные как только для чтения, а defaultValue - как для чтения и записи?

class CartItem2 extends Component {
    constructor(props) {
        super(props);
    }
    handleChangeEvent = e => {
      const { name, type, value } = e.target;
      const val = type === 'number' ? parseFloat(value) : value;
      this.setState(() => { return { [name]: val }});
    };
    updateCartItem = async (e, updateCartItemMutation) => {
      e.preventDefault();
      console.info('Updating Cart Item!!');
      console.info(this.state);
      const res = await updateCartItemMutation({
        variables: {
          id: this.props.cartItem.id,
          quantity: this.state.quantity,
        },
      });
      console.info('Updated!!');
    };
    static getDerivedStateFromProps(nextProps, prevState){
        if (nextProps.cartItem.quantity !== prevState.quantity) {
            console.info("nextProps ", nextProps);
            console.info("prevState", prevState);
            return {quantity: nextProps.cartItem.quantity};
        }
        else return null;
    }

    render() {
        const { cartItem, client } = this.props;
        const { quantity } = this.state;

        return (
            <CartItemStyles>
                <img width = "100" src = {cartItem.item.image} alt = {cartItem.item.title} />
                <div className = "cart-item-details">
                <h3>{cartItem.item.title}</h3>
                <p>
                    {formatMoney(cartItem.item.price * cartItem.quantity)}
                    {' - '}
                    <em>
                        {cartItem.quantity} &times; {formatMoney(cartItem.item.price)} each
                    </em>
                </p>
                <Mutation 
                    mutation = {UPDATE_CART_ITEM_MUTATION} 
                    variables = {this.state}
                >
                    {(updateCartItem, { loading, error }) => {
                    return (
                        <Form2 key = {cartItem.id} onSubmit = {e => this.updateCartItem(e, updateCartItem)}>
                        <Error error = {error} />
                        <label htmlFor = "quantity">
                        <input
                            type = "number"
                            id = "quantity"
                            name = "quantity"
                            placeholder = "Quantity"
                            required
                            value = {quantity}
                            onChange = {this.handleChangeEvent}
                        />
                        </label>
                        <button type = "submit">Updat{loading ? 'ing' : 'e'}</button>
                        </Form2>
                    )
                    }}
                </Mutation>
                </div>
            <RemoveFromCart id = {cartItem.id} />
          </CartItemStyles>
        );
    }
}