How to use the @theme-ui/presets.deep.styles function in @theme-ui/presets

import React, {memo} from 'react';
import {jsx, useThemeUI, ThemeProvider, Styled} from 'theme-ui';
import {deep} from '@theme-ui/presets';

// Some styles are easier to just declare in an actual styles file
import './styles.css';

const theme = {
  ...deep,
  breakpoints: ['40em', '52em', '64em'],
  fonts: {
    text: 'Helvetica Neue',
    heading: 'Passion One'
  },
  styles: {
    ...deep.styles,
    root: {
      height: '100%',
      display: 'flex',
      flex: '1 1 auto',
      justifyContent: 'center',
    },
    Layout: {
      flex: '1 1 auto',
      display: 'flex',
    },
    Header: {
      width: '100%',
    },
    Main: {
      position: 'relative'
    },

...deep.styles.h3,
        m: 0
      }
    },
    hero: {
      title: {
        fontSize: ['0.7em', '1.2em'],
        fontWeight: '800',
        textTransform: 'uppercase',
        lineHeight: ['40px', '80px'],
        margin: 0,
        color: 'inherit',
      }
    },
    link: {
      ...deep.styles.h3,
      color: 'muted',
      textDecoration: 'none',
      borderBottom: '1px solid white',
    }
  }
};

const Reset = () =>
  React.createElement(Global, {
    styles: {
      body: {
        margin: '0',
        backgroundColor: deep.colors.background
      },
      a: {textDecoration: 'none', color: deep.colors.primary, fontWeight: 'bold', fontSize: 20}
    }