Why component does not rerender upon sucessfull data fetch via $.ajax?

Question

I have the following mobx store:

import $ from 'jquery';
import { observable, action, computed, reaction } from 'mobx';

class AvailabilityCallendar {

  public function __construct(){

  }

  @observable selected_date = new Date();
  @observable max_persons = 2;
  @observable loading = false;
  @observable availableDates = null; // initial value, it may be any valid js value.

  async getAvailableDate() {
    $.ajax({
      url:
        createUrl('/calendar/availability') +
        'persons=' +
        this.max_persons +
        '&' +
        selected_date.format('yy-m-d'),
      type: 'GET',
      beforeSend: function () {
        this.loading = true;
      },
      success: function (data) {
        this.availableDates = data 
        this.loading = true;
       },
      fail: function (jqXHR, textStatus, errorThrown) {
        this.loading = false;
        console.error('Error: ' + errorThrown + ', Status: ' + textStatus);
      },
    });
  }
}

And I have the following component as well:

import { Component } from 'react';


class Widget extends Component
{
   render(){

     const {availableDates} from this.props.state;

     return (
       <Callendar dates={availableDates} />
     )
   }
}

And the Callendar is the following component:

import { Component } from 'react';


class Callendar extends Component
{
   render(){

     console.log("CALLENDAR",this.props.dates);   

     return (
       {
        this.props.dates.map(day => <div> {date} </div>)
       }
     );
   }
}

But console.log returns an empty array despite the ejax call returning data. Do you know why that happens?

The console.log output is the following:

CALLENDAR 
Object { … }
​
"$mobx": Object { array: {…}, owned: false, lastKnownLength: 0, … }
​​
array: Object { … }
​​
atom: Object { name: "AvailabilityCallendar@14.availableDates", isPendingUnobservation: false, isBeingObserved: false, … }
​​​
diffValue: 0
​​​
isBeingObserved: false
​​​
isPendingUnobservation: false
​​​
lastAccessedBy: 0
​​​
lowestObserverState: -1
​​​
name: "BookingAddStore@14.daysToShowToCallendar"
​​​
observers: Array []
​​​
observersIndexes: Object {  }
​​​
<prototype>: Object { onBecomeUnobserved: onBecomeUnobserved(), onBecomeObserved: onBecomeObserved()
, isMobXAtom: true, … }
​​
enhancer: function enhancer(newV, oldV)
​​
lastKnownLength: 0
​​
owned: false
​​
values: Array []
​​​
length: 0
​​​
<prototype>: Array []
​​
<prototype>: Object { dehanceValue: dehanceValue(value), dehanceValues: dehanceValues(values), intercept: intercept(handler)
, … }
​
<prototype>: Object { … }

The ajax response is the following:

[
  {
    date: '2021-12-02',
    available: true
  },
  {
    date: '2021-12-03',
    available: true
  },
  ...
]

Also the response headers contain as well:

Content-Type: application/json