React Scroll with offset

Question

I've managed to implement scrolling in react using HashLink but I encounter a problem. I have a sticky menu and the scroll will go to the component needed but it will be blocked by the menu. I need like a 48px offset. I tried to implement with HashLink but I get errors that it's not a function, can you guys help me? For the context Every section including the header with the links is a separate component my layout is:

Section1 id = "header"

Section2 id = "audiance"

etc

Where Section 1 = header with the links. Thats why I use "/#" because I set an id to the components to make the link work

Scrolling with no offset:

 state = {
        page : [
            {
                name : 'About',
                linkTo : '/#about'
            },
            {
                name : 'Features',
                linkTo : '/#audiance'
            },
            {
                name : 'Contact',
                linkTo : '/#contact'
            }
        ]
    };

    populateLinks = (item, i) => (
        <li className="nav-item" key = {i} > <HashLink smooth className="nav-link" to={item.linkTo} >{item.name}</HashLink> </li>
    )

Partial implementation of offset but with errors:

   scrollWidthOffset = (el) => {
        const yCoordinate = el.getBoundingClientRect().top + window.pageYOffset;
        const yOffset = -80; 
        window.scrollTo({ top: yCoordinate + yOffset, behavior: 'smooth' }); 
    }
    


    populateLinks = (item, i) => (
        <li className="nav-item" key = {i} > <HashLink smooth className="nav-link" to={item.linkTo} scroll={el => this.scrollWithOffset(el)}>{item.name}</HashLink> </li>

Answer 1

scrollWidthOffset = (el) => {
  const menu = document.getElementById('menu')
  window.scrollTo({
      top: el.offsetTop - menu.offsetHeight,
      behavior: "smooth"
    });
}

you can also use the container element instead of window, but then you need to set overflow: scroll on it.