bootstrap datetime picker dynamic disabledHours not working

I'm working on a Bootstrap DateTime picker to dynamically disable hours based on the result of an ajax request.

I use Laravel to make an ajax request and get the hours array that should be disabled in the DateTime picker, this works fine and I'm getting the array of hours.

The problem is, the DateTime picker is not disabling the hours if I dynamically do it, but if I manually add the array of hours, it is working.

Here is my code:

<select name="weekday" id="weekday" required>
    <option value="" selected disabled>Choose</option>
    <option value="1">Monday</option>
    <option value="2">Tuesday</option>
    <option value="3">Wednesday</option>
    <option value="4">Thursday</option>
    <option value="5">Friday</option>
</select>

<input type="text" name="time_picker" class="lesson-timepicker" required>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<script>
    let weekday = document.getElementById('weekday')

    function filterTime() {
        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content')
        $.ajax({
            type: 'POST',
            url: 'link-to-get-hours',
            data: {_token: CSRF_TOKEN, weekday: weekday.value},
            dataType: 'JSON',
            success: function (data) {
                if (data.status == true) {
                    // data.time return for example is ['6'] or ['6', '7']
                    // here I'm loading the datetime picker and passed the array of hours
                    loadPicker(data.time)
                } else {
                    console.log(data.message)
                }
            },error: function(xhr, status, error) {
                var r = jQuery.parseJSON(xhr.responseText)
                console.log(r.message)
            }
        });

        moment.updateLocale('en', {
            week: { dow: 1 } // Monday is the first day of the week
        })
    }

    function loadPicker(timeData) {
        console.log(timeData) // this is getting the passed array of hours, but still not working

        $('.lesson-timepicker').datetimepicker({
            format: 'hh:mm A',
            stepping: 30,
            disabledHours: timeData, // here I assigned the timeData array to disable the hours, but don't work
            // but it's working if I hard coded the array just like this: `disabledHours: ['6'],`
            icons: {
                up: 'fa fa-chevron-up',
                down: 'fa fa-chevron-down',
                previous: 'fa fa-chevron-left',
                next: 'fa fa-chevron-right'
            }
        })
    }

    document.addEventListener('DOMContentLoaded', filterTime)
    weekday.onchange = filterTime
</script>