React DOM 显示第一个元素而不是过滤元素

问：

我的网站上有一个页面，我正在映射一系列项目（类似于 monday.com），我现在正在构建过滤器功能，允许用户按标题搜索项目，但我遇到了最奇怪的行为。通过大量的控制台日志记录，我确定搜索词已成功与特定项目匹配，并且状态正在正确更新，但是，DOM 仅显示原始状态数组的第一个元素。（例如，如果我有数组：['网站重新设计'，'营销策略'，'工资单更新']，并且我搜索'工资单更新'，则状态数组将更新为仅术语'工资单更新'，但DOM将显示'网站重新设计'。

以下是相关的状态变量：

const [unfilteredProjects, setUnfilteredProjects] = useState<Project[]>([])
const [projects, setProjects] = useState<Project[]>([])
const [subitems, setSubitems] = useState<Subitem[]>([]);
const [titleFilter, setTitleFilter] = useState('');

以下是过滤器功能：

useEffect(() => {    
    var newArray = unfilteredProjects.filter(proj => {
      return proj.title.toUpperCase().includes(titleFilter.toUpperCase());
    })
    console.log(newArray)

    setProjects([...newArray])
}, [titleFilter])

以下是我更新过滤器的方法：

<input onChange={(e) => setTitleFilter(e.currentTarget.value)} type="text" placeholder='Search' className={cx(styles.searchInput, theme.darkMode && styles.darkMode)}/>

这是我映射数组的位置：

{
  projects.map((project: Project, index) => {      
    console.log(project.title)              
    return (              
      <div key={index}>
        <div>
          <h1>{project.title}</h1>               
        </div>                               
      </div> 
    )
  })
}

这不是我第一次在 React 中构建过滤器;我仔细研究了代码，我做了几乎完全相同的事情，但找不到区别。除了在更改过滤器时触发 useEffect 之外，我还尝试在用户键入时调用函数，并从那里更新状态，但无济于事。我已经简化了很多代码，所以如果需要更多，请告诉我。先谢谢你。