I'm trying to change the ripple color effect of a button in Material UI 5. I have tried a lot of different solutions from the Internet, but none of them seems to be working. This is my component:

import React, { MouseEventHandler } from "react";
import { Button as MaterialButton } from "@mui/material";
import { styled } from "@mui/material/styles";

const StyledButton = styled(MaterialButton)({
  boxShadow: "none",
  backgroundColor: "rgb(74, 144, 223)",
  padding: "10px 20px",
  border: "none",
  outline: "none",
  borderRadius: "5px",
  width: "150px",
  "&:hover": {
    backgroundColor: "rgb(83, 162, 255)",
  },
  "&:disabled": {
    backgroundColor: "rgba(74, 144, 226, 0.5)",
    color: "white",
  },
});

type ButtonProps = {
  text: string;
  onClick: MouseEventHandler<HTMLButtonElement>;
  disabled: boolean;
};

export const Button = (props: ButtonProps) => {
  const { text, onClick, disabled } = props;

  return (
    <StyledButton disabled={disabled} variant="contained" onClick={onClick}>
      {text}
    </StyledButton>
  );
};

Button.defaultProps = {
  disabled: false,
};

Any idea how to change it? Right now the ripple effect is computed based on the color property, so if I change it to red both the ripple effect and the font will be shown with a red color. The problem is that I want to change the ripple effect color without modifying the color of the font.