My dataTables can't change data when ajax request occurs.

When reloading the page the data actually shows, but when the data change trigger occurs when selecting the select option and clicking the submit button, the data doesn't show. Is there something wrong on my dataTables code?.

This is my code:

<script> let base_url = "{{ $base_url }}"; </script>
<script type="text/javascript">
    $(document).ready(function() {

        var myBranch = branch_code;
        var dateStart = '';
        var dateEnd = '';

        getData(myBranch, dateStart, dateEnd);

        $('#submit').on('click', function() {
            var dateRange = $('#daterange').val();
            var dateSplit = dateRange.split(" - ");
            dateStart = dateSplit[0];
            dateEnd = dateSplit[1];
            getData(myBranch, dateStart, dateEnd);
        });

        function getData(myBranch, dateStart, dateEnd) {

            $.ajax({
                type: "POST",
                url: base_url+'/api/json/report/sale-branch',
                data: {
                    branch: myBranch,
                    date_start: dateStart,
                    date_end: dateEnd,
                },
                dataType: "json",
                beforeSend: function () {
                    $("#overlay").fadeIn(5000);
                },
                success: function(row) {
                    $("#overlay").fadeOut(300);
                    console.log(row);
                    $('#title_branch').text(row.data.title_branch);
                    $('#title_date').text(row.data.title_date);
                    
                    new Morris.Bar({
                        barGap:1,
                        barSizeRatio:0.5,
                        element: 'chartCountTrx',
                        data: row.data.chart_count_transaction,
                        xkey: 'day',
                        ykeys: ['value','nominal'],
                        labels: ['Transaction','Amount'],
                        barColors: ['RoyalBlue'],
                    });

                    $('#datatable').DataTable({
                        processing: true,
                        data: row.data.product,
                        columns: [
                            { data: null,'sortable': true,
                                render: function (data, type, row, meta) {
                                    return meta.row + meta.settings._iDisplayStart + 1;
                                }
                            },
                            { data: 'name' },
                            { data: 'category' },
                            { data: 'qty' },
                            { data: 'nominal' },
                        ]
                    });
                }
            })
            return false;
        }
    });
</script>