React组件下拉菜单旁SVG图标不显示问题求助

我在React组件中实现多选下拉菜单时，遇到SVG图标无法正常显示的问题，已经尝试通过元素审查调试，但未解决。以下是组件代码：

import { useEffect, useMemo, useRef, useState } from 'react';
import './stateDropdown.css';
import { states } from './States';
export function StateDropdown() {
  const [isDropDownDisplayed, setIsDropdowndisplayed] = useState(false);
  const [selectedStates, setSelectedStates] = useState<Record<string, boolean>>(
    states.reduce((obj, state) => ({ ...obj, [state.abbreviation]: false }), {})
  );
  const numberOfStatesSelected =
    Object.values(selectedStates).filter(Boolean).length;

  const memoizedNumberOfStatesSelected = useMemo(() => {
    console.log('memo');
    return Object.values(selectedStates).filter(Boolean).length;
  }, [selectedStates]);

  const dropDownRef = useRef(null);
  useEffect(() => {
    console.log('useEffect');

    const onClick = (e: any) => {
      if (e.target !== dropDownRef.current) {
        console.log('we are here');
        setIsDropdowndisplayed(false);
      }
    };
    document.addEventListener('click', onClick);

    // 清理函数
    return () => {
      document.removeEventListener('click', onClick);
    };
  }, []);
  return (
    <fieldset className="state-dropdown">
      <button
        className=""
        onClick={(e) => {
          e.stopPropagation();
          setIsDropdowndisplayed((prevState) => !prevState);
        }}
      >
        {memoizedNumberOfStatesSelected > 0
          ? `${memoizedNumberOfStatesSelected} states selected`
          : '-- Select your states --'}

        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          className="w-6 h-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5"
          />
        </svg>
      </button>
      {isDropDownDisplayed && (
        <div
          onClick={(e) => {
            e.stopPropagation();
          }}
          ref={dropDownRef}
          className="panel"
        >
          {states.map((state) => (
            <fieldset
              key={state.abbreviation}
              className={selectedStates[state.abbreviation] ? `selected` : ''}
            >
              <input
                onChange={(e) =>
                  setSelectedStates({
                    ...selectedStates,
                    [state.abbreviation]: e.target.checked,
                  })
                }
                checked={selectedStates[state.abbreviation]}
                id={`input-${state.abbreviation}`}
                type="checkbox"
              />
              <label htmlFor={`input-${state.abbreviation}`}>
                {state.name}
              </label>
            </fieldset>
          ))}
        </div>
      )}
    </fieldset>
  );
}

内容的提问来源于stack exchange，提问作者zi zi