React onClick a links not working how do I make them work?

Question

Im trying to create links in my homepage to my other pages that do not use Router. My links work in the app but when Ive transferred them to the homepage and they're not working. The error says I need to make the hrefs keyboard accessible and suggests that I make them a button but change the styling in css https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md. Is this the only way to do it? Please can you help? Thank you in advance

import React, { useState }  from 'react';
import './Homepage.css';
import Shop from './Shop';


const PAGE_SHOP = 'shop';
const PAGE_PRODUCT = 'products';
const PAGE_CART = 'cart';
const PAGE_HOMEPAGE = 'home';

export default function Homepage({handleClick}) {

const [page, setPage] = useState(PAGE_HOMEPAGE);

const navigateTo = (nextPage) => {
setPage(nextPage);
};

return (
<>


<ul>
<li><a onClick={() => navigateTo(PAGE_HOMEPAGE)}>HOME</a></li>
<li><a onClick={() => navigateTo(PAGE_SHOP)}>shop</a></li>


</ul>



</>
);
}