Через API Swiper такое невозможно, но можно сделать прогрессбар через API Swiper, а верхнее меню вручную
Допустим код вашего меню такой:

<ul class="swiper-menu">
    <li class="swiper-menu__item" data-index="0">Каталог продукции</li>
    <li class="swiper-menu__item" data-index="1">О нашей компании</li>
    <li class="swiper-menu__item" data-index="2">Контактная информация</li>
    <li class="swiper-menu__item" data-index="3">Категория</li>
 <ul>

Теперь через API Swiper меняем слайды при клике на элементы меню:

const mySwiper = new Swiper('swiper-container', {
   mode:'horizontal',
   loop: false,
   pagination: {
      el: '.swiper-pagination',
      type: 'progressbar',
      clickable: true,
   },

   navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
   },
})
$('.swiper-menu').on('click',  '.swiper-menu__item', function() {
   const index = $(this).data('index')
   mySwiper.slideTo(index)
});

JSON не может иметь одиночные кавычки, поэтому происходит ошибка при парсинге. Нужно заменить все одиночные кавычки на двойные
Например:

const json = "['1', '2', '3']";
const result = JSON.parse(json.replace(/'/g, '"'))

*,
*::before,
*::after {
  box-sizing:border-box;
}

Поставьте и все заработает. Так происходит потому что вы указали ширину в 100% для input, но стандартный border-box у браузеров стоит content-box, который не учитывает padding и border в размер ширины

По ссылке https://faap-app.herokuapp.com/faap/v1/rcvr_board вам возвращается объект в котором нет свойства "items", поэтому в items вы записываете undefined
Если я правильно понимаю items это как раз таки то что приходит в свойстве data, поэтому попробуйте заменить

const fetchItems = async () => {
  const data = await fetch('https://faap-app.herokuapp.com/faap/v1/rcvr_board'
  );

  const json = await data.json();
  setItems(json.data);
};

return (
    <div>
        {items && items.map(item => (
            <h1 key={item.id}>{item.subject}</h1>
        ))}
    </div>
);