'How to make crawlable links in a single pare application in react js

I am making a website in nextjs and reactjs. The website is this https://www.codingconquerors.com/. When I check the lighthouse report, it gives me an err that "links are not crawlable". It is a SPA. I am almost googling from last 4 days but still not able to figure out the solution for this. Below code is displaying the navigation bar:

{navigation.map((item) => (
                <Link
                  spy={true}
                  smooth={true}
                  key={item.name}
                  to={item.href}
                  className="font-medium text-gray-500 hover:text-gray-900"
                >
                  {item.name}
                </Link>
              ))}

The above link tag is from this import import { Link } from 'react-scroll'

Even I tried using Nextjs Link tag instead of reactjs it still does not fix the issue.

The source code generated behind the link tag does not show use of href tag. Is there any way I can fix this SEO issue? Or I have to live with this since it is a SPA.



Solution 1:[1]

This issue is not related to the above tag, upon checking the lighthouse report, I found that the nav links in the header are anchor tags without links which is causing the following issue.

Lighthouse SEO Analysis

Which are these: Links without href

Code for nav links

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Yash Verma