I have a horizontal menu with buttons, on mobile you can drag and move left or right to see all elements. When you click on the button it becomes the 'active' button, I add some styling. What I would achieve here is that when some clicks on a button, it will automatically move to the left or right and become fully visible.

as you can see button on the right side is active but it is out of the viewport

I'm looking for ideas on how I could implement such a mechanism in React/Typescript with Emotion

this is a wrapper/container of buttons:

const StyledDiv = withTheme(
  styled.div<StyledProps>`
    display: flex;
    flex-wrap: nowrap;
    overflow: auto
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    column-gap: 8px;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar {
      display: none;
   }
  `
)

this is how button is built itself

  return (
    <Button data-label={label} isActive={isActive} onClick={() => setActiveCategory(cat)}>
      { renderIcon(icon) }
      <Wrapper>
        {label}
        <StyledSpan isActive={isActive}>{label}</StyledSpan>
      </Wrapper>
    </Button>
  )

and here are CSS code for button

const Button = withTheme(
  styled.button<ActiveButtonProps>`
    padding: 4px 16px 4px 8px;
    font-family: ${({ theme }) => theme.fontFamily.sora};
    border-radius: 4px;
    font-size: 12px;
    line-height: 15px;
    color: ${({ theme }) => theme.horizontalBar.color};
    box-shadow: 0px 2px 4px ${({ theme }) => theme.horizontalBar.boxShadow};
    outline: none;
    background-color: ${({ theme }) => theme.horizontalBar.bgColor};
    border: 1px solid transparent;
    height: 52px;
    display: inline-flex;
    align-items: center;
    position: relative;
    white-space: nowrap;
    cursor: pointer;
    transition: all .3s;
    font-weight: 400;
    border: ${ props => props.isActive ? `1px solid ${color.primary.powerGreen}` : `1px solid transparent`};
    & > img {
      margin-right: 4px; 
    }
  `
)

const StyledSpan = withTheme(
  styled.span<ActiveButtonProps>`
    font-weight: ${ props => props.isActive ? 700 : 400 };
    color: ${ props => props.isActive ? ({ theme }) => theme.horizontalBar.color : ({ theme }) => theme.horizontalBar.colorInactive };
    position: absolute;
    left: 0;
  `
)

const Wrapper = withTheme(
  styled.p<StyledProps>`
    margin: 0;
    position: relative;
    color: transparent;
  `
)