I'm using react-days-picker for accessibility reasons.

I would like to replace the current span tags inside the navbar with button tags.

I could extend it with the navbarElement prop but then my custom component keeps re-rendering each time I click or press a key to change months. It would lose focus.

To change a month, I could only press the key down key once or I had to .press the tab key each time to get the focus again

I'm even following the code included in the documentation (https://react-day-picker.js.org/examples/elements-navbar) but the result is the same:

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>
  );
}