我正在尝试构建一个输入框，用户将在其中输入内容，根据输入内容，在输入框下方会出现一个建议弹出窗口，显示建议内容。在我的代码中，建议内容显示得很好，但当我输入更多内容时，之前的弹出窗口不会关闭。

return <div className="border border-gray-400 rounded-md mx-10 my-10 h-10 relative">
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        className="w-full border-none absolute inset-0 z-10 outline-none px-2 text-sm bg-transparent"
        style={{ WebkitTextFillColor: "transparent" }}
        maxLength={maxLength}
      />
      <div className="text-sm absolute inset-0 flex items-center px-2 whitespace-pre">
        {value.split(" ").map((word, i) => {
          const isHighlighted = word.toLowerCase().includes(suggestions[0]);
          return (
            <div className="relative" key={i}>
              {isHighlighted ? (
                <>{getHighlightedSyntex(word, i)}</>
              ) : (
                getSyntex(word, i)
              )}
              {getSuggestions(word)}
            </div>
          );
        })}
      </div>
    </div>

这是我展示我的渲染的地方。getSuggestions函数如下：

const getSuggestions = (word) => {
    const matchedPartialSuggestions = suggestions.filter(
      (item) => word !== "" && item.toLowerCase().startsWith(word.toLowerCase())
    );
    console.log('va', word, matchedPartialSuggestions)
    return (
      <>
        {matchedPartialSuggestions.length > 0 && (
          <div className="absolute z-10 p-2 bg-white border rounded shadow-lg">
            {matchedPartialSuggestions?.map((item, i) => {
            return <p key={i}>{highlightMatching(word, item)}</p>;
            })}
          </div>
        )}
      </>
    );
  };

在这些函数中，我展示了包含搜索建议的弹出窗口。我知道为什么弹出窗口不会关闭，因为当我输入与建议数据匹配的内容时，getSuggestions函数的变量得到了过滤后的值。这就是为什么弹出窗口不会关闭。但是我只希望在输入值与搜索建议数据匹配时显示搜索建议，否则弹出窗口将始终隐藏。