How to implement ais-refinement-list with algoliaSearchBox, when using Vue Instant Search on Algolia. Here I attach my code and expect the result ?

code:

<ais-refinement-list attribute="color">
        <template scope="{items,refine}">
          <div v-if="listColor.length > 1" class="filtersbox Colors">
            <h4 @click="showColor()">
              {{ filterTitle.colors | uppercase }}
              <div id="Coloricon" class="plus-minus-toggle collapsed"></div>
            </h4>
            <div id="Colorbox" class="content-filter">
              <div class="web-filter-search">
                <input
                  v-model="searchColor"
                  type="text"
                  placeholder="Search color"
                />
                <i class="iconf iconf-iconSearch"></i>
              </div>
               <div v-for="(item, index) in items" :key="index" class="filter-content">
                <label class="check">
                  {{ item.label }}
                  <input
                    :id="item"
                    :value="item.value"
                    v-model="checkedProductType"
                    type="checkbox"
                    @click.prevent="refine(item.value)"
                  />
                  <span class="checkmark"></span>
                </label>
              </div>
            </div>
          </div>
        </template>
      </ais-refinement-list>

expect: