Cannot apply custom Icon

(screen capture above is normal case)

(screen capture above is error case)

I tried to apply custom Clear icon by using ClearSelectedIcon. But it doesn’t work in my environment. Anytime I use ClearSelectedIcon, clear <button> gets empty. (like screen capture above) It would be so thankful if somebody could help me out. Here’s my code below.

  const clearBtnRenderer = () => (
    <>
      // I tried several tags(img tag, text), but nothing worked
      <svg
        width="24"
        height="24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        className="dropdown-search-clear-icon gray"
      >
        <line x1="16" y1="8" x2="8" y2="16"></line>
        <line x1="8" y1="8" x2="16" y2="16"></line>
      </svg>
    <>
  );

  return (
    <div className="a_search_multiselect_box">
      <MultiSelect
        options={optionList}
        value={selected}
        onChange={handleChange}
        ClearSelectedIcon={clearBtnRenderer}
      />
    </div>
  );
};

I refered to storybook below. react-multi-select Storybook : custom arrow

[harshzalavadiya]

released v3.1.7 should fix this typecheck issue

[harshzalavadiya]

@Youn-ha

• First approach is correct type error might be due to incorrect TypeScript interface that was defined by me, I have created a PR that should resolve this issue
• you can use backticks with diff extension diff files will be automatically highlighted when there’s + or - as first charactor