I am unable to navigate to other components using onclick() for anchor tag or button

I want the user to be able to click on either of the two links which are rendered in the main component. I do not want to add a new path to the url. The components should be rendered conditionally. Here is my code:-

import React, { useState } from 'react';
import Roadmap1 from './Roadmap1';
import Roadmap2 from './Roadmap2';

const Roadmap = () => {
  const [selectedRoadmap, setSelectedRoadmap] = useState('roadmap1');

  const handleLinkClick = (roadmap) => {
    setSelectedRoadmap(roadmap);
  };

  return (
    <div>
      <div className="navigation-panel">
        <button
          className={`nav-link ${selectedRoadmap === 'roadmap1' ? 'active-link' : ''}`}
          onClick={() => handleLinkClick('roadmap1')}
        >
          First Roadmap
        </button>
        <button
          className={`nav-link ${selectedRoadmap === 'roadmap2' ? 'active-link' : ''}`}
          onClick={() => handleLinkClick('roadmap2')}
        >
          Second Roadmap
        </button>
      </div>

      <div className="roadmap-content">
        {selectedRoadmap === 'roadmap1' && <Roadmap1 />}
        {selectedRoadmap === 'roadmap2' && <Roadmap2 />}
      </div>
    </div>
  );
};

export default Roadmaps;

Despite the above code the links are unclickable nor am I even able to hover over them. However by default the <Roadmap1 /> component is rendered since it is set as the initial value in the useState hook.

Can someone help me understand why my code is experiencing this behaviour?
I went on this link eslint-plugin-jsx-a11y. I switched from anchor tag to button by reading this. Even so i could not make it work.