Estoy usando react-days-picker por razones de accesibilidad.

Me gustaría reemplazar las etiquetas de intervalo actuales dentro de la barra de navegación con etiquetas de botón.

Podría extenderlo con el accesorio navbarElement , pero luego mi componente personalizado vuelve a renderizarse cada vez que hago clic o presiono una tecla para cambiar de mes. Perdería el foco.

Para cambiar un mes, solo podía presionar la tecla hacia abajo una vez o tenía que presionar la tecla de tabulación cada vez para obtener el foco nuevamente.

Incluso estoy siguiendo el código incluido en la documentación ( https://react-day-picker.js.org/examples/elements-navbar ) pero el resultado es el mismo:

 function Navbar({ nextMonth, previousMonth, onPreviousClick, onNextClick, className, localeUtils, }) { const months = localeUtils.getMonths(); const prev = months[previousMonth.getMonth()]; const next = months[nextMonth.getMonth()]; const styleLeft = { float: 'left', }; const styleRight = { float: 'right', }; return ( <div className={className}> <button style={styleLeft} onClick={() => onPreviousClick()}> ← {prev.slice(0, 3)} </button> <button style={styleRight} onClick={() => onNextClick()}> {next.slice(0, 3)} → </button> </div> ); } export default function Example() { return ( <div> <DayPicker weekdayElement={<Weekday />} navbarElement={<Navbar />} /> </div> ); }