Значение href в элементе DOM отличается от значения в компоненте React

У меня странная проблема с ReactJS.

Я визуализирую список кнопок на странице, где пользователи могут щелкнуть и просмотреть свои счета. Однако значение href в элементе DOM отличается от значения, переданного компоненту React.

Чтобы помочь вам понять, что происходит, есть скриншот элемента React.

И вот как это выглядит после рендеринга в HTML

Как видите, хеши DOM идентичны, но значения href различаются.

Ниже представлена ​​часть кода React. ButtonBase - это просто компонент пользовательского интерфейса, который я использую на веб-сайте.

const renderInvoices = () =>
    map(invoices.sort(descendingOrder), invoice => (
      <Invoice key = {invoice.invoiceNumber} {...invoice} />
    ));

const Invoice = ({
  invoiceNumber,
}) => (
  <tr>
    <td>
      <ButtonBase
        href = {`/invoices/${invoiceNumber}.pdf`}
        target = "_blank"
      >
        View
      </ButtonBase>
    </td>
  </tr>
);

Есть идеи, почему это происходит? Это беспокоит меня последние пару дней. Любые советы приветствуются.