flatpicker(カレンダー）にjavascriptの文字列（html)を追加する方法について

実現したいこと

https://notes.sharesl.net/articles/1923/
の「日付によって時間の選択範囲を変更③」を参考に作っていますが、更に時間(select)のデザインを「 appearance: base-select;」を使って　select のアイコン（矢印）を変えたいと思っています

wordpressのプラグインの都合上、「button、selectedcontent」を書き足すことができないので、javascriptで追加したいと思っています

説明が下手で上手く伝わるか分かりませんが、ヒントなどでも頂ければと思います。
よろしくお願いします

発生している問題・分からないこと

ソースにある「$time.innerHTML」の有無で動作が変わる

$time.innerHTML=''の部分で　コメントアウトするとカンレダーと連動して時間も変わるが、時間とアイコンは表示されない。指定時間である09:00にはなる
$time.innerHTML＝''」をコメントアウトすると矢印は表示されるが、時間が連動されない
（本来は水曜日と日曜日は09:00が表示される設定）

「$time.innerHTML」に「<button><selectedcontent></selectedcontent><span class="material-symbols-outlined">stat_minus_1</span></button>」をいれると　ほぼ、期待通りだけど最初だけ時間が2重に表示されるが日付を選択すれば希望通りの動きになる

該当のソースコード

<html>
<head>
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=stat_minus_1" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<style type="text/css">
:root{
--red        : #f00;
--blue       : #3a6fc4;
}
/* 日曜日：赤 */
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-weekdays .flatpickr-weekday:nth-child(7n + 1),
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-days .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n + 1) {
  color: var(--red);
}

/* 土曜日：青 */
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-weekdays .flatpickr-weekday:nth-child(7),
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-days .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n) {
  color: var(--blue);
}

/* 祝日 */
.flatpickr-day.is-holiday,.flatpickr-day.is-holiday:hover{
background:rgba(237,33,43,0.2);
/*brightness(var(--red), 40%) !important; */
}

/* 入力欄の文字列を選択させないようにしておく  */
.flatpickr-calendar .numInput{
  user-select: none;
}
/* 今日の色 */
.flatpickr-day.today,
.flatpickr-day.today:hover {
  border-color:#0fb6bc;
  color:#25bdcf;

}
/* 祝日かつ選択不可の色　*/
.flatpickr-disabled.is-holiday,
.flatpickr-disabled.is-holiday:hover
{
  border-color:e20000;
  background:#fff;
}
/* 来月の色 */
.flatpickr-day.nextMonthDay{
   color:rgba(57,57,57,0.5);
}

/* 時間　セレクトボックスの幅 */
.smf-form .smf-select-control{
  width:170px;
}

#js-timepicker{
  background:#bde9ff17; 
  box-shadow:0 0 0 1px #43a6df;  
  border-radius:4px;
}
      select,
      ::picker(select) {
        appearance: base-select;
      }
      select {
        border-color: #43a6df;
        border-radius: 4px;
      }

      ::picker(select) {
        border-color: #43a6df;
        border-radius: 4px;
      }
      /*----------------------------------*/
      .pick-select {
        min-width: 180px;
        height: 35px;
        align-items: center;
        padding: 4px 8px;
        > option {
          padding: 4px 8px;
        }

      }

      .pick-select::picker-icon,
      .test::picker-icon{
     display:none;
      }
      .pick-select option::checkmark{
        display:none;
      }

button {
  display: flex;
  width: 100%;
  
  > span {
    margin: 0 0 0 auto;
    
  }
}

.material-symbols-outlined{

  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 24;

  color:red;
}
</style>

<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<!-- 日本語化する場合は下記を追記 -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>


</head>

<body>
<input type="text" name="datepicker" id="js-datepicker">
<select id="js-time" class="pick-select">

</select>
<script>


let minDate = new Date();
minDate = minDate.setDate(minDate.getDate() + 3);

let maxDate = new Date();
maxDate = maxDate.setMonth(maxDate.getMonth() + 3);

//祝日一覧をAPIから取得する
function fetchHolidays() {
  const today = new Date();
  const year  = today.getFullYear();
  return fetch(`https://holidays-jp.github.io/api/v1/${year}/date.json`)
  .then((res) => {
    if (!res.ok) {
      throw new Error(`${res.status} ${res.statusText}`);
    }
    return res.json();
  })
  .then((json) => {
    return json;
  })
  .catch((reason) => {
    console.error(reason);
  });
}

//日付をフォーマット YYYY-MM-DD
function formatDate(date) {
  const year  = date.getFullYear();
  const month = date.getMonth() + 1;
  const mm    = ('00' + month).slice(-2);
  const day   = date.getDate();
  const dd    = ('00' + day).slice(-2);
  return `${year}-${mm}-${dd}`;
}

//祝日の場合にクラスをつける
function addHolidayClass(dayElem, holidays){
  const date      = dayElem.dateObj;
  const selectDay = formatDate(date);
  if(selectDay in holidays){
    dayElem.classList.add('is-holiday');
  }
}


function addTimeList(min = '05:00', max = '16:00') {
  const $time = document.querySelector('#js-time');
  if(!$time){
    return;
  }

  const today       = formatDate(new Date());
  const minTime     = new Date(`${today} ${min}`);
  const minDateTime = minTime.getTime();
  const maxTime     = new Date(`${today} ${max}`);
  const maxDateTime = maxTime.getTime();

  let optionDom = '';

  for (let i = 5; i < 17; i++) {
    const h = ('00' + i).slice(-2);
    for (let j = 0; j < 60; j+=30) {
      const m = ('00' + j).slice(-2);
      const optionDate = new Date(`${today} ${h}:${m}`);
      const optionDateTime = optionDate.getTime();
      if(optionDateTime < minDateTime || optionDateTime > maxDateTime){
        continue;
      }
      optionDom += `<option value="${h}:${m}">${h}:${m}</option><hr />`;
    }
  }
  $time.insertAdjacentHTML('beforeend', optionDom);

}

function selectTimeChangeByDate(selectedDate) {
  if(!selectedDate){
    return;
  }

  const $time = document.querySelector('#js-time');
  if(!$time){
    return;
  }

//  $time.innerHTML = '';


  // 日曜日と水曜日の開始時間を指定
  if( (selectedDate.getDay() === 0) || (selectedDate.getDay() === 3) ){
      addTimeList('9:00','16:00');
    }else{
      addTimeList('5:00', '16:00');
  }
}


async function flatpickrInit() {
  // 休日
  const desableHolidays = [
   "2025-08-02",
   "2025-08-10"
  ];
  

  const holidays = await fetchHolidays();



  flatpickr('#js-datepicker', {
    locale      : 'ja',
    dateFormat  : 'Y.m.d（D）',
    defaultDate : minDate,
    minDate     : minDate,
    maxDate     : maxDate,
//    enableTime  : true,
    minTime     : '05:00',
    maxTime     : '16:00',
    onDayCreate : (dObj, dStr, fp, dayElem) => {
      this.addHolidayClass(dayElem, holidays);
    },
    onChange      : (selectedDates, dateStr, instance) => selectTimeChangeByDate(selectedDates[0]),
    onClose       : (selectedDates, dateStr, instance) => selectTimeChangeByDate(selectedDates[0]),
    onReady       : (selectedDates, dateStr, instance) => selectTimeChangeByDate(selectedDates[0]),
    disable       : desableHolidays.map(date => new Date(date))
  });
    
}



flatpickrInit();


let buttons = '<button><selectedcontent></selectedcontent><span class="material-symbols-outlined">stat_minus_1</span></button>';
let element = document.getElementById("js-time");
 element.innerHTML = buttons;
</script>

<select name="text" class="test">
  <button>
    <selectedcontent></selectedcontent>
    <span class="material-symbols-outlined">stat_minus_1</span>
  </button>
<option>テスト</option>
<option>テスト２</option>
</select>
</body>
</html>