OrderBy field here is rich text..

Apex class-
public static list<Water_Order__c>getWaterOrder() {
        return [Select id,Name,Quantity__c,Order_By__c from Water_Order__c];

  Javascript-
orderslist
   @track columns = [
        { label: 'Name', fieldName: 'Name' , type:'text' },
        { label: 'Quantity', fieldName: 'Quantity__c' ,type: 'Number' },
        { label: 'OrderBy', fieldName: 'Order_By__c' }
    ];
    @wire(waterOrder)
     wiredRecordHandler({ data,error }) {
        if(data){
            console.log(data)
            if(!this.orderBy){
           this.orderslist = data.map(item=>{
               let orderBy = item.Order_By__c.replace(/(<([^>]+)>)/ig, '');
               return {...item, orderBy}
               console.log( 'Without HTML Tags ' + this.orderslist)
               debugger
           })    
        }
    }
HTML--
   <lightning-datatable
                        key-field="id"
                        data={orderslist}
                        columns={columns}>
                </lightning-datatable>

I am trying to pull values from Googlebooks API for my LWC. Below is my code-->
<template if:true={books}>
                    <template for:each={books.items} for:item="book">
                        <lightning-layout-item size="3" padding="around-small" key={book.id}>
                            <div class="slds-box slds-p-around_medium slds-text-align_center">
                              <img src={book.volumeInfo.imageLinks.smallThumbnail} height="200px">
                              <div class="slds-text-heading_small slds-p-vertical_medium"><strong>{book.volumeInfo.title}</strong></div>
                              <div> <strong>Published Date- {book.volumeInfo.publishedDate}</strong></div>
                              <div> <strong>Average Rating- {book.volumeInfo.averageRating}</strong></div>
                              <!--div><strong>Categories</strong><span>{book.voumeInfo.categories}</span></div-->
                            </div>

JS Code->const BOOK_URL = 'https://www.googleapis.com/books/v1/volumes?q='
export default class BookApp extends LightningElement {
    query='Man'
    books
    connectedCallback(){
        this.fetchBookData()
    }
    fetchBookData(){
        fetch(BOOK_URL+this.query)
    .then(Response=>Response.json())
    .then(data=>{
        console.log(data)
    this.books = data
    })
    .catch(error=>console.error(error))
    }
}


For both the categories and small thumbnail i am getting error -> [Cannot read property 'smallThumbnail' of undefined]

Apex class-
public static list<Water_Order__c>getWaterOrder() {
        return [Select id,Name,Quantity__c,Order_By__c from Water_Order__c];

  Javascript-
orderslist
   @track columns = [
        { label: 'Name', fieldName: 'Name' , type:'text' },
        { label: 'Quantity', fieldName: 'Quantity__c' ,type: 'Number' },
        { label: 'OrderBy', fieldName: 'Order_By__c' }
    ];
    @wire(waterOrder)
     wiredRecordHandler({ data,error }) {
        if(data){
            console.log(data)
            if(!this.orderBy){
           this.orderslist = data.map(item=>{
               let orderBy = item.Order_By__c.replace(/(<([^>]+)>)/ig, '');
               return {...item, orderBy}
               console.log( 'Without HTML Tags ' + this.orderslist)
               debugger
           })    
        }
    }
HTML--
   <lightning-datatable
                        key-field="id"
                        data={orderslist}
                        columns={columns}>
                </lightning-datatable>