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

/**
 * Copyright Zendesk, Inc.
 *
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */

import React from 'react';
import { render } from 'garden-test-utils';
import { getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming';
import Avatar from './Avatar';

const activeBoxShadow = DEFAULT_THEME.shadows.sm(getColor('crimson', 400)!);

describe('Avatar', () => {
  it('passes ref to underlying DOM element', () => {
    const ref = React.createRef();
    const { container } = render(
      
        <img alt="">
      
    );

    expect(container.firstChild).toBe(ref.current);
  });

  it('renders badge if provided', () =&gt; {
    const { container } = render(

it('renders away', () => {
      const { container } = render();
      const color = getColor('yellow', 400);

      expect(container.firstChild).toHaveStyleRule('box-shadow', DEFAULT_THEME.shadows.sm(color!));
    });

it('renders active', () => {
      const { container } = render();
      const color = getColor('crimson', 400);

      expect(container.firstChild).toHaveStyleRule('box-shadow', DEFAULT_THEME.shadows.sm(color!));
    });
  });