I have a button component that is hidden on <768px and displayed on >768px

import { styled } from '@mui/material/styles';
import Button from '@mui/material/Button';

interface TestButtonProps {
  buttonLabel: string;
}

const MyButton = styled(Button)(
  ({theme: {breakpoints} }) => ({
    display: 'none',

   [breakpoints.up('md')]: {
     display: 'block',
    }
  })
)

const TestButton = ({
  buttonLabel
  } : TestButtonProps) => {
    return (
      <div>
        <MyButton>
          {buttonLabel}
        </MyButton>
      </div>
    )
  }
  export default TestButton;

I'm trying to use React Testing Library to test that this component is displayed on >768px (so that I can later add a fireEvent test)

import { render, screen } from '@testing-library/react';
import TestButton from './test-button';

const mandatoryProps = {
  buttonLabel: 'Button Label',
};

describe('MyBupaHelpDrawer', () => {
  it('it should render the button above md screensize', () => {
  render(<TestButton {...mandatoryProps} />);
    screen.getByRole('button', { name: 'Button Label'}); 
  });
});

However, the test is failing.

TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "Button Label"

Seems that the styling first rule "display: none" is picked up but the media query rule is not.

Also noted that the following test passes :

expect(window.innerWidth).toBe(1024); 

I've also tried conditionally rendering the component with react based on the screen size, rather than modifying the display attribute with css.

How can I modify my test to pick up the media query?

Should I be approaching this in a different way?