I'm trying to make the scrollTo work but from other questions I've seen it has to do with my css however none of the solutions I found worked.

I'm using react and styled components and the scroll is on the X axis

here's the react:

  return (
    <StyledBoard container>
      <StyledGrid>
        <StyledScroll>
          <StyledScrollWrapper>
            {data.map((category, i) => (
                {content}
            ))}
          </StyledScrollWrapper>
        </StyledScroll>
      </StyledGrid>
    </StyledBoard>
  );

here's the styling:

import styled from "styled-components";
import Grid from "@mui/material/Grid";
import Card from "@mui/material/Card";
import SimpleBar from "simplebar-react";

const StyledBoard = styled(Grid)`
  margin-top: 20px !important;
  margin-bottom: 8px !important;
  display: flex;
  flex-flow: row nowrap;
  overflow: auto;
`;

const StyledGrid = styled.div`
  width: 100%;
  display: flex;
`;

const StyledScroll = styled(SimpleBar)`
  height: calc(100vh - 265px);
  width: 100%;

  .simplebar-wrapper {
    height: 100%;
  }

  .simplebar-content {
    height: 100%;
  }

  .simplebar-scrollbar::before {
    background-color: ${({ theme }) => theme.colours.primary};
  }
`;

const StyledScrollWrapper = styled.div`
  display: flex;
  width: auto;
`;