Error when clicking on a HashLink and being directed to the id. How do I solve it?

Question

In an application with React I am using

<ol>
    <li><HashLink smooth to='/#id'>Id</HashLink></li> 
    ...
<ol>

<div id='id'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
....

And in my css I have

html { scroll-behavior: smooth; }

but it is conflicting with the , which I need to click several times to be able to scroll to the id.

Sometimes it scrolls to the id correctly, but sometimes you need to click several times for the scrolling to work. If I remove scroll-behavior: smooth it works, but when I click on the footer to redirect to the page, it doesn't scroll smooth since it was removed