fix Overlay lag effect

src/components/Overlay/Transition.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 
 export interface ITransitionProps {
+    extraStyle?: React.CSSProperties
     show: boolean
 }
 
@@ -32,6 +33,7 @@ export const Transition: React.FC<ITransitionProps> = props => {
     return mounted && (
         <div
             style={{
+                ...props.extraStyle,
                 opacity,
                 transition: 'all 250ms',
             }}

src/components/Overlay/index.tsx

@@ -15,12 +15,14 @@ export const Overlay: React.FC<IOverlayProps> = props => {
 
     React.useEffect(() => {
         document.body.classList.toggle('noscroll', props.show)
-
     }, [props.show])
 
     return (
         <Transition
             show={props.show}
+            extraStyle={{
+                zIndex: 1000000,
+            }}
         >
             <div
                 onClick={onClick}
@@ -32,7 +34,6 @@ export const Overlay: React.FC<IOverlayProps> = props => {
                         height: 100%;
                         top: 0;
                         left: 0;
-                        z-index: 1000000;
 
                         background-color: rgb(255, 255, 255);
                     }