How to use the d3-scale-chromatic.schemeCategory10.map function in d3-scale-chromatic

export function colors(node: HTMLElement) {
  const id = uniqueId('col');
  node.insertAdjacentHTML('beforeend', `<datalist id="${id}L">${schemeCategory10.map((d) =&gt; `<option value="${d}"></option>`).join('')}</datalist>`);
  node.insertAdjacentHTML('beforeend', `<datalist id="${id}LW"><option value="#FFFFFF"></option>${schemeCategory10.slice(0, -1).map((d) =&gt; `<option value="${d}"></option>`).join('')}</datalist>`);

  node.insertAdjacentHTML('beforeend', `<strong>Solid Color</strong>`);
  {
    for (const colors of [schemeCategory10, schemeAccent, schemeDark2, schemePastel1, schemePastel2, schemeSet1, schemeSet2, schemeSet3]) {
      node.insertAdjacentHTML('beforeend', `<div class="lu-color-line">
        ${colors.map((d) =&gt; `<div class="lu-checkbox-color"><input value="${d}" type="radio" name="color" id="${id}${fixCSS(d)}"><label style="background: ${d}" for="${id}${fixCSS(d)}"></label></div>`).join('')}
      </div>`);
    }
    node.insertAdjacentHTML('beforeend', `<div class="lu-checkbox"><input value="solid:custom" type="radio" name="color" id="${id}O">
      <label for="${id}O"><input list="${id}L" name="solid" type="color"></label>
    </div>`);
  }
  node.insertAdjacentHTML('beforeend', `<strong>Sequential Color</strong>`);
  {
    for (const colors of sequentialColors) {