React testing library: test failed style (Select + Form Control from MUI)

Question

The problem

I'm trying to test the border is red if the component is in error state, but it's failing in local machine, but not in codesandbox

What I have tried:

• Check whether there is a difference between FormHelperText and fieldSet in styling
• Tried to replicate over codesandbox
• read docs and research found a similar case but uses different styling: https://twitter.com/hieptuanle5/status/1051811353176858625

Code Component with error state set to true

import React from "react";
import "./styles.css";
import FormControl from "@material-ui/core/FormControl";
import FormHelperText from "@material-ui/core/FormHelperText";
import Select from "@material-ui/core/Select";

export const SelectInput = () => {
  return (
    <FormControl error={true} variant="outlined">
      <Select />
      <FormHelperText> test </FormHelperText>
    </FormControl>
  );
};

Testing

import { render, screen, waitFor } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import { SelectInput } from "../App";
test("test form control error state", async () => {
  render(<SelectInput />);

  const fieldSet = screen.getByRole("group", { hidden: true });
  const helperText = screen.getByText("test");
  await waitFor(() => expect(fieldSet).toBeInTheDocument());

  expect(helperText).toHaveStyle(`color: #f44336;`);
  expect(fieldSet).toHaveStyle(`border-color: #f44336;`);
});

codesanbox link https://codesandbox.io/s/rtl-mui-select-test-style-border-tekgl?file=/src/test/select.test.js:0-549

EDIT 2 Local machine error logs:

  ● should accept error string props

    expect(element).toHaveStyle()

    - Expected

    - border-color: #f44336;
    + border-color: rgba(0, 0, 0, 0.23);

    >  97 |   expect(fieldSet).toHaveStyle(`border-color: #f44336;`)

Any leads will be much appreciated. Thank you