How to use the preact-emotion.path function in preact-emotion

import { calculateCircle } from '../../helpers/calculateCircle'

const Container = styled.div`
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
`

const Layer = styled.svg`
  height: 100%;
  width: 100%;
`

const Overlay = styled.path`
  fill: rgba(0, 0, 0, 0.5);
  fill-rule: evenodd;
  stroke: none;
  opacity: ${(props) => (props.show ? 1 : 0)};
  transition: opacity 0.2s ease;
`

const mapEvent = (event, sizes) => {
  event.preventDefault()
  const touches = event.touches[0]

  return {
    show: true,
    x: touches.clientX / sizes.width,
    y: (touches.clientY - sizes.top) / sizes.height
  }