layout adds elements to the html code, but they are not displayed on the site.

Steil

in the test scenario, everything works, but for some reason in html in F12 it shows the element code for example "paging" or "info", but it is not displayed on the site. What could be the problem, has anyone encountered it? The function in columnDefs works and footerCallback works fine too.
My js

const table = new DataTable('#dataTable', {
        lengthMenu: [
            [5, 10, 20, -1],
            ['5', '10', '20', 'Все']
        ],
        order: [[0, "asc"]],
       
        layout: {
          topStart: ['pageLength', 'searchPanes'],
          topEnd: 'search',
          bottomStart: 'info',
          bottomEnd: 'paging'
        },
        searchPanes: {
            cascadePanes: true,
            viewTotal: true,
            layout: 'columns-2',
            columns : columnsSearchPanes,
            initCollapsed: true,
            threshold: 1,
        },
        columnDefs: [
          {
              targets: [-1],
              render: function(data, type, row) {
                  var cleanedData = data.replace(',','.');
                  var num = parseFloat(cleanedData).toFixed(2);
                  return isNaN(num) ? '' : num;
              },
        }
        ],
        language: {
          url: "{% vite_asset_url 'static/json/ru.json' %}"
        },
        footerCallback: function () {
          var api = this.api();
          // Получение имен колонок
          const columnsNames = columnsIndex.map(index => {
            return api.column(index).header().textContent.trim();
          });

          const totals = [];
          const pageTotals = [];
   
          // Преобразование числа до двух знаков после запятой
          var intVal = function (i) {
            var num = Number((typeof i === 'string' ? parseFloat(i.replace(',', '.')): i).toFixed(2)) || 0;
              return isNaN(num) ? 0 : num;
          };
   
          // Подсчет сумм(на все страницы, для текущей страницы)
          columnsIndex.forEach((index) => {
            totals.push(
              api
                .column(index)
                .data()
                .reduce(function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0));

            pageTotals.push(
              api
              .column(index, { page: 'current' })
              .data()
              .reduce(function (a, b) {
                  return intVal(a) + intVal(b);
              }, 0));
          });
  
          // Обновление подвала
          $(api.column(0).footer()).html(
            `
                <div class="grid grid-rows-${columnsIndex.length} gap-2 p-2">
                  ${columnsIndex.map((index, i) => 
                  `
                  <div class="text-left">
                        Итого (${columnsNames[i]}) ${pageTotals[i] } ₽ (${totals[i]} ₽ по всем страницам)
                  </div>
                  `
                  ).join('')}
            `
          );
        },
    });

allan

I'd need a link to a test case showing the issue to understand what is going wrong there please.

Allan