Devuelve números de columna fijos, cuando agrega más contactos, siempre serán 3 columnas, y necesito cambiar los números para un diseño receptivo, como debería ser 2 columnas o 1 según la resolución de la pantalla.

 const contactsCollsMemo = useMemo(() => { return contactsData?.reduce((acc, contact, i) => { acc[i % 3] = (acc[i % 3] || []).concat(contact); return acc; }, {} as { [key: string]: Contact[] }); }, [contactsData]); return ( <div className="contacts-wrapper"> {Object.keys(contactsCollsMemo || {}).map((key) => ( <ContactBlock key={key} contacts={contactsCollsMemo[key]} /> ))} </div> ) //component ContactBlock: <div className="contacts-block"> {contacts.map((contact) => ( <div key={contact.id} className="contacts-info"> <div className="contacts-name">{contact.name}</div> <div className="contacts-phone">Тел.: {contact.phone}</div> <div className="contacts-email">E-mail: {contact.email}</div> </div> ))} </div>