Reactjs 使用setInterval判断数据的时间，然后在过期后从对象中删除;遇到性能问题

我有一个子组件，我试图呈现并判断时间属性是否过期.

data和setData是我的父组件的props .

setInterval允许倒计时计时器按预期工作，然而，当一个过期事件被过滤，然后在我的setData中更新时，它会从对象中删除该项目，但是当在浏览器中显示时，对象中的新的第一个项目将显示时间0s，然后返回到它的适当剩余时间.

下面是我的子组件的标记:

function Item({ item, data, setData }) {

     useEffect(() => {
        const endTime = new Date(item.endTime);
        const itemID = item.itemId;

        const timeCheck = (endTime, itemID) => {

            let time = new Date();
    
            let ending = Math.floor(parseInt(endTime) - (time.getTime()/1000));
            let minutes = Math.floor(ending / 60);
            let seconds = ending % 60;
    
            if (minutes < 60 && minutes >=1 ) {
                setEndingTime(minutes + "m " + seconds + "s");
            } else if (minutes === 0) {
                setEndingTime(seconds + "s");
            }
            
            if (minutes <= 0 && seconds <= 0) {
                //console.log(itemID);
                //console.log(data);
                let newData = data.filter(item => item.itemId !== itemID);
                setData(newData);
            }
            //console.log(minutes + "m " + seconds + "s");
        }

        const intervalId = setInterval(() => {
            timeCheck(endTime.getTime()/1000, itemID)
        }, 1000);

        return () => clearInterval(intervalId);
    }, [item, data, setData]);

    return(
                    <div className="item__time">
                        Time Left: { endingTime }
                    </div>
    )
}

export default Item;

父组件:

function Tab({ setLoading }) {
    const [data, setData] = useState([]);

    const getItems = async () => {
        setLoading(true);
        try {
            const response = await fetch(‘local.api/endpoint’);
            const json = await response.json();
            setData(json);
        } catch (error) {
            console.log("Error", error);
        } finally {
            setLoading(false);
        }
    }

    useEffect(() => {
        getItems();
    }, []);

    return(
            <div className="tab">
                {data.length > 0 &&
                    data.map((item, index) => {
                        return(
                            <Item item={ item } data={ data } setData={ setData } key={`item__${ index }`} />
                        )
                    })
                }
          </div>
    )
}

export default Tab;

有什么 idea 可能导致渲染问题？