uncaught error, ‘updatedDoc ‘is read-only

when running the code below, i get uncaught error, ‘updatedDoc ‘is read-only error.
i am fairly new to reactnative, and I can’t figure out where this error is.
when i am pressing processDr function, triggering the onPress event, I am getting this error,I would appreciate if you help me here. I am new to react native development.

//appoint.js/reducers

import { APPOINT_DOC,Remove_Doc } from "../actions/appoint";
import docAppoint from '../../modules/docAppoint';

const initialState = {
  items: {},
  totalAmount: 0
};

export default (state = initialState, action) => {
  switch (action.type) {
    case APPOINT_DOC:
      const addedProduct = action.product;
      const prodPrice = addedProduct.price;
      const prodTitle = addedProduct.title;

      let updateOrNewDocAppoint;

      if (state.items[addedProduct.id]) {
        // already have the item in the cart
        updateOrNewDocAppoint = new docAppoint(
          state.items[addedProduct.id].quantity + 1,
          prodPrice,
          prodTitle,
          state.items[addedProduct.id].sum + prodPrice
        );
      } else {
        updateOrNewDocAppoint = new docAppoint(1, prodPrice, prodTitle, prodPrice);
      }
      return {
        ...state,
        items: { ...state.items, [addedProduct.id]: updateOrNewDocAppoint },
        totalAmount: state.totalAmount + prodPrice
      };
      case Remove_Doc:
      const selectedDoc = state.items[action.pid];
      const quantity = selectedDoc.quantity;
      let updatedDoc;
      if (quantity > 1) {
        // need to reduce it, not erase it
        const updatedDoc = new docAppoint(
            selectedDoc.quantity -1,
            selectedDoc.prodPrice,
            selectedDoc.prodTitle,
            selectedDoc.sum - selectedDoc.prodPrice
        );
        updatedDoc = { ...state.items, [action.pid]: updatedDoc };
      } else {
        updatedDoc = { ...state.items };
        delete updatedDoc[action.pid];
      }
      return {
        ...state,
        items: updatedDoc,
        totalAmount: state.totalAmount - selectedDoc.prodPrice
      };
  }

    return state;
  };

//registerDr

import React from "react";
import { View, Text, StyleSheet,Button,FlatList } from 'react-native';
import {useSelector,useDispatch} from 'react-redux';
import colors from "../../constants/colors";
import appoint from "../../store/reducers/appoint";
import ProcessDr from "../../components/Doctor/process";
import * as docActions from '../../store/actions/appoint';

const registerDr = props => {
const totalFee = useSelector (state => state.appoint.totalAmount)
const appointDoc = useSelector (state => {
    const transformedAppointDoc = []
    for (const key in state.appoint.items ) {
        transformedAppointDoc.push({
            productId : key,
            productTitle : state.appoint.items[key].productTitle,
            productPrice : state.appoint.items[key].productPrice,
            quantity : state.appoint.items[key].quantity,
            sum : state.appoint.items[key].sum
        });
    }
    return transformedAppointDoc;
    
});

const dispatch = useDispatch();

    return(
        <View style={styles.screen}>

            <View style={styles.summary}>
                <Text style={styles.summarytext}> Fee: <Text style={styles.amount} > {totalFee} RS </Text> </Text>
                <Button disabled = {appointDoc.length === 0}
                title="Appoint Doctor" color={colors.primary}  />
            </View>
            <View>
                <FlatList data ={appointDoc} 
                keyExtractor = {item => item.productId} 
                renderItem ={itemData =>
                <ProcessDr quantity={itemData.item.quantity}
                title={itemData.item.productTitle} 
                amount={itemData.item.sum} 
                 onRemove = {() => {
                 dispatch(docActions.removeDoc(itemData.item.productId))
                }}
                
                
                
                />} />
            </View>

        </View>
    )
}

const styles= StyleSheet.create({
    screen:{
        margin: 20,
    },
    summary:{
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-between',
        marginBottom:20,
        padding: 10,
        shadowColor: 'black',
    shadowOpacity: 0.26,
    shadowOffset: { width: 0, height: 2 },
    shadowRadius: 8,
    elevation: 5,
    borderRadius: 10,
    backgroundColor: 'white',
    },
    summarytext:{
        fontFamily:'opsb',
        fontSize:18,
    },
    amount: {
        color: colors.primary
    }
})

export default registerDr;