How to use the @zendeskgarden/react-theming.DEFAULT_THEME.breakpoints function in @zendeskgarden/react-theming

describe('Responsively', () => {
        Object.keys(DEFAULT_THEME.breakpoints).forEach(breakpoint => {
          it(`renders ${breakpoint}=${size} width`, () => {
            const props = { [breakpoint]: size };
            const { container } = render();
            const minWidth = (DEFAULT_THEME.breakpoints as any)[breakpoint];

            expect(container.firstChild).toHaveStyleRule('max-width', `${(size / 12) * 100}%`, {
              media: `(min-width: ${minWidth})`
            });
          });
        });
      });
    });

describe('Responsively', () => {
        Object.keys(DEFAULT_THEME.breakpoints).forEach(breakpoint => {
          const key = `order${breakpoint[0].toUpperCase()}${breakpoint.substring(1)}`;

          it(`renders ${key}=${order} flex order`, () => {
            const props = { [key]: order };
            const { container } = render();
            const minWidth = (DEFAULT_THEME.breakpoints as any)[breakpoint];

            expect(container.firstChild).toHaveStyleRule(
              'order',
              expect.stringContaining(order.toString()),
              {
                media: `(min-width: ${minWidth})`
              }
            );
          });
        });

describe('Responsively', () => {
        Object.keys(DEFAULT_THEME.breakpoints).forEach(breakpoint => {
          const key = `justifyContent${breakpoint[0].toUpperCase()}${breakpoint.substring(1)}`;

          it(`renders ${key}=${justifyContent} flex justification`, () => {
            const props = { [key]: justifyContent };
            const { container } = render();
            const minWidth = (DEFAULT_THEME.breakpoints as any)[breakpoint];

            expect(container.firstChild).toHaveStyleRule(
              'justify-content',
              expect.stringContaining(justifyContent),
              {
                media: `(min-width: ${minWidth})`
              }
            );
          });
        });

describe('Responsively', () => {
        Object.keys(DEFAULT_THEME.breakpoints).forEach(breakpoint => {
          const key = `alignItems${breakpoint[0].toUpperCase()}${breakpoint.substring(1)}`;

          it(`renders ${key}=${alignItems} flex alignment`, () => {
            const props = { [key]: alignItems };
            const { container } = render();
            const minWidth = (DEFAULT_THEME.breakpoints as any)[breakpoint];

            expect(container.firstChild).toHaveStyleRule(
              'align-items',
              expect.stringContaining(alignItems),
              {
                media: `(min-width: ${minWidth})`
              }
            );
          });
        });