Request is not received in the backend

Question

My project uses Angular as the frontend and Node.js as the backend with socket.io integration.

I am trying to send a post request from frontend to backend as follows:

Frontend

The button in the HTML to call the onOrder() method:

 <button (click)="onOrder()" class="button">Checkout</button></div>

The method call in .ts file:

onOrder(){
    console.log('pressed'); // successfully logged to console
    if(this.itemsInCart.length > 0 ) {
      let order: SubmitOrderModel = new SubmitOrderModel();
      order.order = this.itemsInCart;
      this.webSocketService.fetchOrders(order);
    }
  }

The SubmitOrderModel below:

export class AddToCartModel {
    thumbnail?: string = '';
    mealName: string = '';
    addons: string[] = [];
    variant?: string = '';
    cost: number = 0;
    quantity: number = 1;
}

export class SubmitOrderModel {
    order: AddToCartModel[] = [];
}

The webSocketService methods below:

setupSocketConnection(){
        this.socket.on('fetchOrders', (data: string) => {
            console.log(data);
            localStorage.setItem('allOrders', JSON.stringify(data[0]));
          });
        this.socket.on('fetchRequests', (data: string) => {
            console.log(data);
            localStorage.setItem('allRequests', JSON.stringify(data[0]));
            StaffScreenComponent.allRequests = data;
          });

    
    }

    fetchOrders(order: SubmitOrderModel) {
        this.socket.emit('fetchOrders', order);
    } 

    OnFetchOrders() {
        return this.socket.fromEvent('fetchOrders');
    }

Backend

and in the backend, the schema definition is as follows:

var mongoose = require('mongoose');

var menuOrderSchema = mongoose.Schema;

var AddMenuOrderSchema = new menuOrderSchema({
    order: [{
        thumbnail: String,
        mealName: String,
        addons: [String],
        variant: {type: String, default: 'Standard'},
        cost: Number,
        quantity: Number
    }],
});

var newMenuOrderSchema = mongoose.model('addMenuOrderSchema', AddMenuOrderSchema );

module.exports = newMenuOrderSchema;

And the socket configuration in the backend is below:

io.on('connection', (socket)=>{
    console.log('connection')
      socket.on("fetchOrders", (arg) => {
        console.log('fetchOrders');
        const postMenuOrderM = new addMenuOrderModel(arg);
        console.log('checking')
        postMenuOrderM.save().then(function(){
          addMenuOrderModel.find().then(data=>{
                io.emit('fetchOrders', data)
            }).catch(err=>res.send(err));
          });
      });

    socket.on('disconnect', () => console.log('disconnected')); 
})

The Node.js server is not receiving any calls from the UI.

What am I doing wrong here?