当我尝试制作自定义选择下拉列表时遇到了一个问题，当我在map（）中使用数组列表时，一切都很顺利，但当我在输入字段中输入一个项目时，显示为[object Object]，我尝试了几乎所有可能的解析...
下面是我的下拉列表代码示例。

const handleChange = (event) => {
    setSelectedOption(event.target.value);
  }

    
const handleKeyDown = (event) => {
        if (event.key === 'ArrowDown') {
          event.preventDefault();
          const nextOption = highlightedOption + 1;
          if (nextOption < statusList.length) {
            setHighlightedOption(nextOption);
          }
        } else if (event.key === 'ArrowUp') {
          event.preventDefault();
          const prevOption = highlightedOption - 1;
          if (prevOption >= 0) {
            setHighlightedOption(prevOption);
          }
        } else if (event.key === 'Enter' && highlightedOption !== -1) {
          setSelectedOption(statusList[highlightedOption]);
          setShowList(false)
        }
      }

这是我的输入和div map（）列表。

<input className={`${classes.input} ${statusIsValid&&selectedOption===''  ? classes.border : ''} ${statusIsValid&&selectedOption===null  ? classes.border : ''}`}
        type="text"
        value={selectedOption}
        onChange={handleChange}
        onKeyDown={handleKeyDown}
        onClick={showListFunc}
        placeholder="Odjel"
        ref={input1Ref}
      />
       {showList && <div className={classes.options}>
        {statusList.map((option, index) => (
          <div
            key={Math.random()}
            style={{ backgroundColor: index === highlightedOption ? 'lightgray' : 'white' }}
          >
            {option.naziv}
          </div>
        ))}
      </div>}

当我尝试控制台记录我的当前状态列表时，我得到了这个：

我的完整代码下this sandbox