fix: 🐛 error in React 17 (#67)

1. replace useEffect with useLayoutEffect

✅ Closes: ant-design/ant-design#27006

Author: jueinin

examples/animate.tsx

@@ -58,7 +58,7 @@ const MyItem: React.ForwardRefRenderFunction<any, MyItemProps> = (
   ref,
 ) => {
   const motionRef = React.useRef(false);
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     return () => {
       if (motionRef.current) {
         onAppear();

src/List.tsx

@@ -248,7 +248,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     return true;
   });
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     // Firefox only
     function onMozMousePixelScroll(e: Event) {
       if (inVirtual) {

src/hooks/useMobileTouchMove.ts

@@ -66,7 +66,7 @@ export default function useMobileTouchMove(
     }
   };
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     if (inVirtual) {
       listRef.current.addEventListener('touchstart', onTouchStart);
     }