Scroll | ScrollBy not working in my React Component

Im having troubles with my typescript component that i want to use to either scroll left or right based in the side prop. In a JSX component y just use onClick={() => scroll(-150)} to scroll left and 150 to scroll right.

Thanks in advance!

// React & dependencies
import { FC } from "react";

// Material Components
import { Button } from "@mui/material";

import ArrowBackIosNewRoundedIcon from "@mui/icons-material/ArrowBackIosNewRounded";
import ArrowForwardIosRoundedIcon from "@mui/icons-material/ArrowForwardIosRounded";
// My components

// Queries & Mutations

// Typescript
interface Props {
  scrollAmount: number;
  side: "left" | "right";
}
const ScrollButton: FC<Props> = ({ scrollAmount, side }) => {
  return (
    <Button
      style={{
        display: "block",
        top: "0.001px",
        left: side == "left" ? "-2.5vw" : "2.5vw",
        right: side == "left" ? "2.5vw" : 0,
        borderRadius: side == "left" ? "20px 0 0 20px" : "0px 20px 20px 0px",
      }}
      variant='contained'
      onClick={() => {
        console.log(scrollAmount);
        console.log(side);

        // scroll({ left: side == "left" ? scrollAmount * -1 : scrollAmount })
        scrollBy(side == "left" ? scrollAmount * -1 : scrollAmount, 0);
      }}
    >
      {side == "left" ? (
        <ArrowBackIosNewRoundedIcon />
      ) : (
        <ArrowForwardIosRoundedIcon />
      )}
    </Button>
  );
};
export default ScrollButton;