Modal que possibilita clicar fora do box para fechar

index.tsx

import {
  Box,
  CloseButton,
  Container,
  OverlayBackdrop,
  OverlayBody
} from './style'

import { MdClose } from 'react-icons/md'

export const Modal: React.FC = () => {
  function closeModalClickingInOverlay(e: any) {
    if (e.currentTarget === e.target) {
      // close()
    }
  }

  return (
    <Container
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      <OverlayBackdrop />
      <OverlayBody />
      <Box initial={{ scale: 0 }} animate={{ scale: 1 }} exit={{ opacity: 0 }}>
        <CloseButton type="button">
          <MdClose size={26} />
        </CloseButton>
      </Box>
    </Container>
  )
}

style.ts

import styled from 'styled-components'

import { motion } from 'framer-motion'

export const Container = styled(motion.div)`
  width: 100vw;
  height: 100vh;

  background: rgba(0, 0, 0, 0.3);

  z-index: 10;

  position: fixed;

  top: 0;
  left: 0;

  display: flex;
  justify-content: center;
  align-items: center;
`

export const Overlay = styled.div`
  position: absolute;

  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
`

export const OverlayBackdrop = styled(Overlay)`
  background: rgba(0, 0, 0, 0.7);
  z-index: 15;
`

export const OverlayBody = styled(Overlay)`
  overflow-y: auto;
  z-index: 20;
`

export const Box = styled(motion.div)`
  width: 700px;
  height: 400px;

  display: flex;
  flex-direction: column;
  align-items: center;

  background: rgba(0, 0, 0, 0.9);

  padding: 32px;

  position: relative;

  z-index: 25;
`

export const CloseButton = styled.button`
  position: absolute;
  top: 3px;
  right: 3px;
  
  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 10;
  
  transition: filter 0.2s background 0.2s;

  &:hover {
    filter: brightness(0.8);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
  }
`