Necesito una solución adecuada ya que el código que he escrito parece estar codificado de forma rígida ya que se usa el método de filtro múltiple para el mismo escenario. Por favor, ayúdame a resolver ya que soy nuevo para reaccionar. La salida se representa dinámicamente en un gráfico de barras.

 const ClientActivityChart = () => { const [clients, setClients] = useState([]) const getClients = async () => { try { const res = await fetch('http://localhost:4000/api/addClients', { method: 'GET', headers: { 'Content-Type': 'application/json', }, credentials: 'include', }) const data = await res.json() console.log(data) const filterJan = data.filter((item) => { let date = new Date(item.date) const month = date.toLocaleString('default', { month: 'long' }) return month === 'January' }) const filterFeb = data.filter((item) => { let date = new Date(item.date) const month = date.toLocaleString('default', { month: 'long' }) return month === 'February' }) const filterMarch = data.filter((item) => { let date = new Date(item.date) const month = date.toLocaleString('default', { month: 'long' }) return month === 'March' }) const filterApril = data.filter((item) => { let date = new Date(item.date) const month = date.toLocaleString('default', { month: 'long' }) return month === 'April' }) const filterJune = ......... var dataItem = [ filterJan.length, filterFeb.length, filterMarch.length, filterApril.length, filterMay.length, filterJune.length, filterJuly.length, filterAug.length, filterSep.length, filterOct.length, filterNov.length, filterDec.length, ] console.log(dataItem) setClients(dataItem) } catch (err) { console.log(err) } } useEffect(() => { getClients() }, [])

Aquí hay una salida. ingrese la descripción de la imagen aquí