Горизонтальный скролл по клику на элемент на чистом React.js

Нужно реализовать возможность, при клике на элемент, скролл прокручивался на элемент по которому кликнули, но нужно это сделать без пакетов и библиотек. Не могу понять как реализовать именно прокручивание на клик, думал через якоря но не получилось сделать

Есть вёрстка:

export default function NavTab() {
return (
    <header className={s.Main}>
        <ul className={s.NavList}>
            <li className={s.NavListItem}>
                <button
                    className={s.NavListItemLink}
                    // disabled="true"
                >
                    Job Focus
                </button>
            </li>
            <li className={s.NavListItem}>
                <button className={s.NavListItemLink}>Soft Skills</button>
            </li>
            <li className={s.NavListItem}>
                <button className={s.NavListItemLink}>
                    Technical Skills
                </button>
            </li>
            <li className={s.NavListItem}>
                <button className={s.NavListItemLink}>
                    Functional Expertise
                </button>
            </li>
            <li className={s.NavListItem}>
                <button className={s.NavListItemLink}>
                    Patent Expertice
                </button>
            </li>
            <li className={s.NavListItem}>
                <button className={s.NavListItemLink}>
                    Personal Expertise
                </button>
            </li>
            <li className={s.NavListItem}>
                <button className={s.NavListItemLink}>
                    Hard Expertise
                </button>
            </li>
            <li className={s.NavListItem}>
                <button className={s.NavListItemLink}>
                    Domain Expertise
                </button>
            </li>
            <li className={s.NavListItem}>
                <button className={s.NavListItemLink}>
                    Domain Expertise
                </button>
            </li>
        </ul>
    </header>
);

}

Есть пример как должна выглядеть прокрутка: прокрутка скрола по элементу