Issue while dynamic update

[JoelGeorge693]

import React, { useEffect, useState } from "react";
import { Chrono } from "react-chrono";
import moment from "moment";
import InputLabel from "@material-ui/core/InputLabel";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
import { data } from "./data";

const App = () => {
const [items, setItems] = useState([]);
const [dateValue, setDateValue] = useState("1 year Ago");

const filterDate = (data, startDate, endDate) => {
return data.filter((item) => {
const postedDate = new Date(item.postedDate || item.datetime);
return postedDate >= startDate && postedDate <= endDate;
});
};

const handleDateFilter = (e) => {
const selectedValue = e.target.value;
setDateValue(selectedValue);
};

useEffect(() => {
const now = new Date();
let startDate;

switch (dateValue) {
  case "3 Months Ago":
    startDate = new Date(now.setMonth(now.getMonth() - 3));
    break;
  case "6 Months Ago":
    startDate = new Date(now.setMonth(now.getMonth() - 6));
    break;
  case "1 year Ago":
    startDate = new Date(now.setFullYear(now.getFullYear() - 1));
    break;
  default:
    startDate = new Date(now.setFullYear(now.getFullYear() - 1));
}

const filteredData = filterDate(data, startDate, new Date());
setItems([]);
setItems(
  filteredData.map((item) => ({
    cardDetailedText: item.text,
    cardSubtitle: item.hashtags ? item.hashtags.replace(/,/g, " ") : "",
    cardTitle: item.postedDate
      ? moment(item.postedDate).format("LL")
      : moment(item.datetime).format("LL"),
  }))
);

}, [data, dateValue]);

console.log(items);

return (
<>


Duration

<Select
native
value={dateValue}
onChange={handleDateFilter}
label="Duration"
inputProps={{
name: "duration",
id: "outlined-duration-native-simple",
}}
>
<option value={"3 Months Ago"}>3 Months Ago
<option value={"6 Months Ago"}>6 Months Ago
<option value={"1 year Ago"}>1 year Ago


<Chrono
items={items}
disableToolbar
allowDynamicUpdate
mode="HORIZONTAL"
cardHeight={100}
fontSizes={{
cardText: "13px",
title: "14px",
cardTitle: "14px",
}}
theme={{
primary: "#FF7272",
secondary: "white",
cardBgColor: "rgba(37, 147, 252, 0.11)",
cardForeColor: "black",
}}
useReadMore
/>
</>
);
};

export default App;

Above is the code when I select 3 months data the data shortens and works fine but after filtering the data to 3 months and then again selecting the data for 1 year the component gets stuck and is not clickable even though the extra data is visible.
Then again if I select 3 months i.e. filter it again the component works fine.

Why could this be happening ? Is this a bug or I am doing something wrong ?

PS:- 3 months data is an array of 5 objects and 1 year data is an array of 13 objects. Would appreciate the help. Thanks