reactjs - Pular para a seção funciona no segundo clique

No Navbar, eu tenho no "Skills Section" um evento onClick. Quando clico em "Skills", o onClick funciona, mas ele impede a página de pular para a seção.

Barra de Navegação TSX:

const [skillsClicked, setSkillsClicked] = useState<boolean>(false);
    
    const handleClickSkills = () =>{
        setSkillsClicked(!skillsClicked);
    }
    <a href="#skills" >
        <li onClick={handleClickSkills}>Skills</li>
    </a>

Habilidades do TSX:

const {skillsClicked, handleClickSkills} = useGlobalContext();

return (
        <section>
            <div>
                <ul id='skills'></ul>
                    
            </div>
        </section>
    )

Eu quero que, quando eu clicar em "Skills", o evento onClick mude o estado e ao mesmo tempo pule para a seção baseada no ID. (Separadamente, ambos funcionam bem)

Resposta #1

tente isto:

const [skillsClicked, setSkillsClicked] = useState<boolean>(false);

const handleClickSkills = () =>{
    setSkillsClicked(!skillsClicked);
    document.getElementById("skills").scrollIntoView({
        behavior : "smooth"
    })
}

// some code in between

<div onClick={handleClickSkills}>
    <li>Skills</li>
</div>

// or:
<li onClick={handleClickSkills}>
    Skills
</li>