reactjs - Hoppa till avsnitt fungerar vid andra klicket

I navigationsfältet har jag på "Skills Section" en onClick-händelse. När jag klickar på "Skills" fungerar onClick, men det hindrar sidan från att hoppa till avsnittet.

TSX Navigeringsfält:

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

TSX-färdigheter:

const {skillsClicked, handleClickSkills} = useGlobalContext();

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

Jag vill när jag klickar på "Skills", att onClick-händelsen ska ändra tillståndet och samtidigt hoppa till sektionen baserat på ID. (Separat fungerar de båda bra)

Svar #1

prova detta:

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>