chart js can’t load when insert a second nested async function inside the first

I try to get name and date from dropdown and pass to the api point like parameters:

            <li class="nav-item dropdown" >
                <a class="nav-link dropdown-toggle" id="clicked"  href="#" role="button" data-bs-toggle="dropdown"
                    aria-expanded="false">
                    Име на станция:
                </a>
                <ul class="dropdown-menu" id="clickedNames">
                   
                </ul>
            </li>

            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" id="clicked2" href="#" role="button" data-bs-toggle="dropdown"
                    aria-expanded="false">
                    Дата за прогноза:
                </a>
                <ul class="dropdown-menu" id="clickedDates">
                   
                </ul>
            </li>
        </ul>

With this function I create a chart:

    async function mike11Chart() {
  await getMike11Data()
  //Create second chart
  const ctx2 = document.getElementById('mike11chart');

  new Chart(ctx2, {
    type: 'line',
    data: {
      labels: mike11LabelChart,
      datasets: [{
        type: 'line',
        label: 'Метра',
        data: mike11DataChart,
        borderWidth: 1,
        
      }]
    },
    options: {
      scales: {
        y: {
          type: 'linear',

        }
      }
    }
  })
};

I create this function to get clicked name and date and pass like a parameter:

    //Create a function who will give clicked values like a parameter on API
async function getMike11Data() {
  document.querySelector('#clickedNames').addEventListener('click', showNames)
  document.querySelector('#clickedDates').addEventListener('click', showNames)
  let currFlag = true
  let count = 0;
  async function showNames(e) {

    if (currFlag) {
      dataAPI.nameStation = e.target.innerHTML.replace(/.*+s?/, '');
      currFlag = false;
    } else {
      dataAPI.dateStation = e.target.innerHTML;
    }
    count++;
    if (count != 1) {
      const formatDate = "YYYY-MM-DD HH:mm:ss"
      const apiUrl = "http://194.141.118.43:3010/mike11?id="+dataAPI.nameStation+"&id2="+moment(dataAPI.dateStation).format(formatDate);
     
      const response = await fetch(apiUrl)
      const mike11data = await response.json()

      const mike11date = mike11data.floodguard_mike11.rows.map((x) => x.date)
      //console.log(mike11date)
      const mike11value = mike11data.floodguard_mike11.rows.map((x) => x.level)
      //console.log(mike11value)

      mike11LabelChart = mike11date;
      mike11DataChart = mike11value;
      //debugger;
    }
  }
}

const apiUrl come with correct url path and data coming, but chart cannot displaying.

apiUrl

Response come with full data with date and values:

When I remove showNames() function and paste static url addres on apiUrl which I have copied when debugging from the variable itself everythink is ok and chart is showing.

Like this:

 //Create a function who will give clicked values like a parameter on API
async function getMike11Data() {
  
      const formatDate = "YYYY-MM-DD HH:mm:ss"
      const apiUrl = "http://194.141.118.43:3010/mike11?id=Maritsa%20-%20132543%20-%20HPoint-Water%20level&id2=2023-01-23%2014:00:00"

      const response = await fetch(apiUrl)
      const mike11data = await response.json()

      const mike11date = mike11data.floodguard_mike11.rows.map((x) => x.date)
      //console.log(mike11date)
      const mike11value = mike11data.floodguard_mike11.rows.map((x) => x.level)
      //console.log(mike11value)

      mike11LabelChart = mike11date;
      mike11DataChart = mike11value;
      
    }

When I use hardcoded url address the chart is showing.

How can I otherwise get the clicked name and date and put them in the function getMike11Data();