问题[toggle]

当我按下按钮时，它变为disabled。在计时器结束时，按钮应该再次处于活动状态，但这不会发生。为什么计时器到期后按钮不切换回来？我怀疑问题出在handleDisabled. 我把它放在那里并在函数中debugger看到了它。我做错了什么以及如何解决？itemhandleDisabled undefined

这是我的代码，包含所有必需的数据：

const CurrentEventsItem = () => {
    const [timeLeft, setTimeLeft] = useState( 15);
  
    const getPadTime = (time) => time.toString().padStart(2, "0");
  
    const minutes = getPadTime(Math.floor(timeLeft / 60));
    const seconds = getPadTime(timeLeft - minutes * 60);

    useEffect(() => {
        const interval = setInterval(() => {
          setTimeLeft((timeLeft) =>
            timeLeft >= 1 ? timeLeft - 1 : handleDisabled() || 15
          );
        }, 1000);
        return () => clearInterval(interval);
      }, []);
    
      const getRandomElements = (array, count) => {
        const shuffled = array.sort(() => 0.5 - Math.random());
        return shuffled.slice(0, count);
      };

    const [appState, changeState] = useState( [])

    useEffect(() => {
        getCurrentEvents()
      }, [])
    
      const getCurrentEvents = async() => {
        const data = await ProductDataService.getAllCurrentEvents()
        changeState(data.docs.map((doc) => ({...doc.data(), id: doc.id})))
      }

    const [selectedItems, setSelectedItems] = useState(() =>
        getRandomElements(appState, 3)
    );

    useEffect(() => {
        if (timeLeft === 0) {
          const elements = getRandomElements(appState, 3);
          setSelectedItems(elements);
        }
      }, [timeLeft, appState]);

    const toggleActiveStyles = (index) => {
        if (appState[index].statusItem) {
          return "current__events__hot-price disabled";
        } else {
          return "current__events__hot-price";
        }
      };
    
      const toggleActiveStylesBtns = (index) => {
        if (appState[index].statusItem) {
          return "current__events__btn-green disabled";
        } else {
          return "current__events__btn-green";
        }
      };
    
    const toggleActive = (item) => {
     item.statusItem = !item.statusItem;
     changeState([...appState]);
     setSelectedItems([...selectedItems]);
    };

    const handleDisabled = () => {
        appState.forEach((item) => {
          if (item.statusItem) {
            toggleActive(item);
          }
        });
    };

    return (
        <>
        <div className='current__events__wrapper'>
            {selectedItems.map((item, index) => 
                <div className="current__events__hot-price__item" key={index}>
                    <div className={toggleActiveStyles(index)}>
                        <h5 className="current__events__card-title__large">Hot Price</h5>
                    </div>
                    <div className="current__events__image">
                        <img src={item.avatar} alt='user' className="rounded-circle" width='75' height='75'/>
                    </div>
                    <div className="current__events__info">
                        <h4 className="current__events__title__middle">{item.title}</h4>
                    </div>
                    
                    <div className="current__events__timer">
                        <span>{minutes}</span>
                        <span>:</span>
                        <span>{seconds}</span>
                    </div>

                    <button className={toggleActiveStylesBtns(index)} onClick={() => toggleActive(item)} disabled={item.statusItem}>СДЕЛАТЬ ХОД</button> 
                </div> 
            )}

            
            </div>
        </>
    )
}