What is the reason for following error : NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node

问题

I am working on ionic react . I have an error as shown in image . I got this error on clicking a button to fetch the data from API and update the content of the page . After debugging I found that error is occurring in Ionic slides. What can be the reason and solution for the following error?

<IonSlides options={slideOpts}>
  {
    assignedOrderData.map((item1: any) => item1.map((item: any) =>
      <IonSlide>
          <IonGrid id='dashboard-orders'>
              <div onClick={() => history.push(`/myorderdetails/${item.order_id}`)} >
                <IonRow >
                  <IonCol style={{ height: '.5px', borderTop: '.5px' }} size='1' class="ion-text-end">
                    <IonIcon icon={timeOutline} color='primary' />
                  </IonCol>
                  <IonCol size='5'>
                    <IonText class="ion-text-nowrap" color='primary'> Delivery Time: 5 PM </IonText>
                  </IonCol>

                  <IonCol size='6' class="ion-text-end" >
                    <IonBadge onClick={() => { }}>View Delivery </IonBadge>
                  </IonCol>
                </IonRow>

              <IonRow>
                <IonCol size='8' class="ion-text-start">
                  <IonText color='dark' style={{ fontSize: '.8em' }}>   {[item.shipping_address_1, item.shipping_city, item.shipping_postcode].filter(Boolean).join(',  ')} </IonText>
                </IonCol>
                <IonCol class="ion-text-end">
                  <IonText style={{ fontSize: '.8em' }} color='dark' class="ion-text-start"  >Order : # {item?.order_id} </IonText>
                </IonCol>
              </IonRow>

              <IonItem lines='full' color='medium' style={{ height: '.5px', borderTop: '.5px' }}></IonItem>

              <IonRow style={{ paddingTop: '5px' }}>
                <IonCol> <IonText color='dark' class="ion-text-nowrap">5.33 m </IonText></IonCol>
                <IonCol> <IonText color='dark' class="ion-text-nowrap">{item.delivery_time} </IonText></IonCol>
                <IonCol > <IonText color='dark' class="ion-text-nowrap">{item.total_text} </IonText></IonCol>
                <IonCol> <IonText color='dark' class="ion-text-nowrap">{item.payment_method} </IonText></IonCol>
              </IonRow>

              <IonRow style={{ paddingTop: '3px' }}>
                <IonCol> <IonText style={{ fontSize: '.8em' }} class="ion-text-nowrap">Dist </IonText></IonCol>
                <IonCol> <IonText style={{ fontSize: '.8em' }} class="ion-text-nowrap">ETA </IonText></IonCol>
                <IonCol> <IonText style={{ fontSize: '.8em' }} class="ion-text-nowrap">Amount</IonText></IonCol>
                <IonCol> <IonText style={{ fontSize: '.8em' }} class="ion-text-nowrap">Payment</IonText></IonCol>
              </IonRow>
            </div>
        </IonGrid>
      </IonSlide>
    ))}
</IonSlides>

来源：https://stackoverflow.com/questions/65803577/what-is-the-reason-for-following-error-notfounderror-failed-to-execute-remov