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

return 
  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} /> 
 {value.split(" ").map((word, i) => { const isHighlighted = word.toLowerCase().includes(suggestions[0]); return ( 
 {isHighlighted ? ( <>{getHighlightedSyntex(word, i)} ) : ( getSyntex(word, i) )} {getSuggestions(word)} 
 ); })} 
 

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

const getSuggestions = (word) => { const matchedPartialSuggestions = suggestions.filter( (item) => word !== "" && item.toLowerCase().startsWith(word.toLowerCase()) ); console.log('va', word, matchedPartialSuggestions) return ( <> {matchedPartialSuggestions.length > 0 && ( 
 {matchedPartialSuggestions?.map((item, i) => { return 
{highlightMatching(word, item)}
; })} 
 )}  ); };

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