Overflow conflicting with shadow (overlay) about react-image-crop HOT 8 CLOSED

import 'react-image-crop/dist/ReactCrop.css'

import cn from 'classnames'
import useResizeObserver from 'use-resize-observer'

import ReactCrop, {
  PercentCrop,
  ReactCropProps,
  Crop as CropValue,
} from 'react-image-crop'
import { FC, useCallback, useLayoutEffect, useRef, useState } from 'react'

import styles from './index.module.scss'

export const Crop: FC<CropProps> = ({ className, src, ...props }) => {
  const [crop, setCrop] = useState<PercentCrop | undefined>()

  const { ref, width, height } = useResizeObserver<HTMLDivElement>()

  const cropValue = props.crop ?? crop

  const cropRef = useRef<ReactCrop | null>(null)
  const viewBoxRef = useRef<HTMLImageElement | null>(null)
  const cropImgRef = useRef<HTMLImageElement | null>(null)

  const classNames = cn(styles.crop, className)

  const setViewBox = useCallback(
    (crop: CropValue) => {
      if (!crop || !width || !height) return
      const { current: cropImage } = cropImgRef

      if (!cropImage) return

      const croppedX = width * (crop.x / 100)
      const croppedY = height * (crop.y / 100)

      const translateX = -croppedX
      const translateY = -croppedY

      cropImage.style.transform = `translateX(${translateX}px) translateY(${translateY}px)`
    },
    [props.crop]
  )

  const onChange: ReactCropProps['onChange'] = (pixelCrop, percentCrop) => {
    if (!width || !height) return

    if (!props.crop) {
      setCrop(percentCrop)
      setViewBox(percentCrop)
    }

    props.onChange?.(pixelCrop, percentCrop)
  }

  useLayoutEffect(() => {
    if (!cropValue) return

    setViewBox(cropValue)
  }, [cropValue])

  return (
    <ReactCrop
      ref={cropRef}
      className={classNames}
      crop={props.crop ?? crop}
      onChange={onChange}
      minHeight={50}
      minWidth={50}
      renderSelectionAddon={() => {
        return (
          <img
            style={{ height, width }}
            ref={cropImgRef}
            src={src}
            className={styles.cropImage}
          />
        )
      }}
    >
      <img
        ref={(originalRef) => {
          ref(originalRef)
          viewBoxRef.current = originalRef
        }}
        src={src}
      />
    </ReactCrop>
  )
}

.crop {
  overflow: initial;

  :global(.ReactCrop__crop-selection) {
    box-shadow: 0 0 0 99999em rgb(0 0 0 / 50%);
    box-shadow: none;
  }

  :global(.ReactCrop__crop-selection) {
    border: none;
  }

  :global(.ReactCrop__selection-addon) {
    position: inherit;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }

  :global(.ReactCrop__child-wrapper) {
    &:after {
      content: '';
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
    }
  }

  .cropImage {
    position: sticky;
    z-index: -1;
  }

  :global(.ReactCrop__drag-handle) {
    $width: 8px;

    &:after {
      width: $width;
      height: $width;
      border: 1px solid var(--color-text-main-active);
      outline: none;
      border-radius: 50%;
      background-color: var(--color-primary);
    }
  }
}