I have this small code and I have two buttons in it and I want the color of the first button to become green when I point the mouse at it and the color of the second button to become red when I point the mouse at it

But when I put the name of the color within the “backgroundColor” I did not find any problem in the code, but when I put “hex like (#43a047)” it did not work, how can I solve the problem?

const useStyles = makeStyles({
  button1: {
    backgroundColor: "none",
    "&:hover": {
      backgroundColor: "#43a047",
      color: "#e8e4e4",
    },
  },
  button2: {
    backgroundColor: "none",
    "&:hover": {
      backgroundColor: "#e53935",
      color: "#e8e4e4",
    },
  },
});

 <ButtonGroup
              style={{
                // color: "#f8f4fc",
                // backgroundColor: "#282c3c",
                maxWidth: "206px",
                maxHeight: "40px",
                minWidth: "206px",
                minHeight: "40px",
                // marginRight: 10,
              }}
              aria-label="outlined primary button group"
            >
              <Button
                style={{
                  maxWidth: "100px",
                  minWidth: "100px",
                }}
                className={classes.button}
              >
                approve
              </Button>
              <Button
                style={{
                  maxWidth: "100px",
                  minWidth: "100px",
                }}
              >
                reject
              </Button>
            </ButtonGroup>