Styling on a React Link element causes click to break

Question

So, this one I just cannot figure out. I tried a custom (in my head, simple and elegant) solution for pagination, but I realize it's maybe not that. But still, it kinda works and the way it now breaks doesn't make sense at all.

For this, I use a combination of Pagino (partial edit from other SO answers) & react-scroll imports.

Inside the render function:

         <div id="cardList-pagino-buttons">
          <ul>
            {pages.map((page) => (
              <Link to={"cardpage-"+(page !== "next" || "previous" ? pagino.page : page)} 
              key={page} onClick={() => hanglePaginoNavigation(page)} 
                spy={true} smooth={true} duration={100} containerId="cardList-pagino-container">
                {/* { page == "end-ellipsis" || "start-ellipsis" ? "..." : page} */}
                {page}
              </Link>
            ))}
          </ul>
        </div>
        <Element id="cardList-pagino-container">
         {/* Cardlist renders multiple: <div id='cardpage-[index]'>[CardData]</div> */}
          <CardList cardList={cardList}/> 
        </Element>
      </div>

the hanglePaginoNavigation function:

    const hanglePaginoNavigation = (type) => {
      if (typeof type === "string") {
        // Something wrong with the start and end elepsis, Coffeescript = pagino[type]?.();
        // pagino[type]();
        let nxtoprv = type == "next" ? pagino.page + 1 : pagino.page - 1,
            currentPage = document.getElementById("cardpage-"+nxtoprv);
        currentPage.scrollIntoView({
          behavior: "smooth",
          block: "nearest"
        });
        pagino.setPage(nxtoprv);
      } else {
        let page = document.getElementById("cardpage-"+type);
        page.scrollIntoView({
          behavior: "smooth",
          block: "nearest"
        });
        pagino.setPage(type);
      }
    };

and for what it's worth, pagino (just keeps track of pages tho):

    const [pages, setPages] = useState([]);

    const pagino = useMemo((counting = 0) => {
      const _ = new Pagino({
        showFirst: false,
        showLast: false,
        siblingCount: 10,
        boundaryCount: 0,
        onChange: (page, count) => setPages(_.getPages())
      });
      _.setCount(counting);
  
      return _;
    }, []);

So still rather simple in the outcome: I have a couple of rendered links that correspond to different pages which are rendered inside the element 'pagino-container'. When I click on one of the links, inside the div it scrolls to the clicked page.

It works as I have it now. If it's that elegant, or simply I don't know.

But now the strange thing. If I start adding styles to the rendered links, and I am talking simple 1px borders and some padding, suddenly it breaks, and the clicks on the link do nothing... (sorry re-phrase, the click is actually registered, just the scrolling doesn't get triggered anymore, which is strange, as nothing is changed for id's or anything, and positioning for the scrolling content is also not changed) It doesn't matter if it's loaded through CSS, or through inline-style.

To make it a bit more strange. if only one of the buttons has a border, the scrolling only works for the first click on any of the buttons. if all the buttons have a border, not any scrolling occurs. And if I just add styles through dev-tools, it keeps working no matter what..

Does anyone have an idea what can cause this?

**Edit: Well, Apparently the conditional in the Link element got mirrored and this seems to have caused it. What the styling had to do with it is beyond me