我有这段代码，控制从数组onClickMap什么的行为。useState被设置为字符串const [activeFilter, setActiveFilter] = useState('All');，它应该自动过滤所有包含该字符串作为标签的产品，但它没有自动这样做，我不知道为什么。请帮助下面的代码。
index.js

import React, { useEffect, useState } from 'react'
import {client} from '../lib/client'
import { Product, FooterBanner, HeroBanner } from '../components'

const Home = ({products, bannerData}) => {
  const [productItems, setProductItems] = useState([])
  const [filterWork, setFilterWork] = useState([]);
  const [activeFilter, setActiveFilter] = useState('All');

  useEffect(() => {
    setProductItems(products)
  }, [])

  const handleProductFilter = (item) => {
    setActiveFilter(item)

    setTimeout(() => {
    if (item == 'All'){
      setFilterWork(productItems)
    }else{
      setFilterWork(productItems.filter((productItem)=> productItem.tags.includes(item)))
    }
  }, 500)
  }

  return (
    <>
      <HeroBanner heroBanner={bannerData.length && bannerData[0]} />
      <div className='products-heading'>
        <h2>Best Selling Products</h2>
        <p>Smoke accessories of many variations</p>
      </div>

      <div className='product_filter'>
          {['Lighter', 'Pipe', 'Roller', 'Hookah', 'All'].map((item, index) => (
            <div
            key={index}
            className={`product_filter-item app__flex p-text ${activeFilter === item ? 'item-active' : ''}`}
            onClick={() => handleProductFilter(item)}
            >
              {item}
            </div>
          ))}
        </div>

      <div className='products-container'>
        {
        filterWork.map((product) => <Product key={product._id} product={product} />)
        }
      </div>

      <FooterBanner footerBanner={bannerData && bannerData[0]} />
    </>
  )
};

export const getServerSideProps = async () => {
  const query = '*[_type == "product"]'
  const products = await client.fetch(query)

  const bannerQuery = '*[_type == "banner"]'
  const bannerData = await client.fetch(bannerQuery)

  return {
    props: {products, bannerData}
  }
}

export default Home

下图是加载时的外观，包含“全部”标签的所有产品只有在再次单击“全部”按钮时才可见，而不管它最初是否处于活动状态