remove duplicate image in two page mode

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "image-viewer",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

src/components/BookComponent.tsx

@@ -81,7 +81,7 @@ class BookComponent extends React.Component<any, any>{
     }
 
     componentDidMount(){
-        fetch('https://picsum.photos/v2/list')
+        fetch('https://picsum.photos/v2/list?limit=30')
             .then(response=>{
                 return response.json()
             }).then(data=>{

src/components/TwoPagesView.tsx

@@ -1,11 +1,39 @@
 import React, {useState, useEffect} from 'react'
 import {Transition, animated} from 'react-spring/renderprops'
-import {ComponentContainer, PageComponent, PageContainer} from './OnePageView'
+import {ComponentContainer, PageComponent} from './OnePageView'
-import { IBookContext } from './BookComponent'
+import { IBookPage } from './BookComponent'
+import styled from 'styled-components'
+
+const PageContainer = styled.div`
+    height: 600px;
+    position: relative;
+    width: 100%;
+    cursor: pointer;
+    margin-bottom: 8px;
+    overflow-x: hidden;
+    & > div {
+        will-change: transform, opacity;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+`
+
 
 export default function TwoPagesView(props: any) {
     let {src, currIndex, flagToReverse} = props
-    const [pagesToshow, setPagesToShow] = useState<IBookContext[]>([])
+    const [pagesToshow, setPagesToShow] = useState<IBookPage[]>([
+        {
+            src: '',
+            alt: '',
+            thumbnail: '',
+        },
+        {
+            src: '',
+            alt: '',
+            thumbnail: '',
+        }
+    ])
     
     useEffect(()=>{
         const shouldShowPage = (pageIndex: number)=>{
@@ -28,27 +56,39 @@ export default function TwoPagesView(props: any) {
         }
     }, [currIndex, src])
 
+    const firstPageObj = {
+        keys: (item: any)=> item.src,
+        initial: {},
+        from: {opacity: 1, transform: flagToReverse? "translate3d(-50%, 0, 0)": "translate3d(100%, 0, 0)"},
+        enter: { opacity: 1, transform: "translate3d(0%, 0, 0)" },
+        leave: { opacity: 0, transform: flagToReverse? "translate3d(100%, 0, 0)": "translate3d(-50%, 0, 0)"},
+    }
+
+    const secondPageObj = {
+        keys: (item: any)=> item.src,
+        from: {opacity: 1, transform: flagToReverse? "translate3d(0%, 0, 0)": "translate3d(150%, 0, 0)"},
+        enter: { opacity: 1, transform: "translate3d(50%, 0, 0)" },
+        leave: { opacity: 0, transform: flagToReverse? "translate3d(150%, 0, 0)": "translate3d(0%, 0, 0)"},
+        initial: {},
+    }
+
     return (
         <ComponentContainer>
             <PageContainer>
                 <Transition
                     reset
                     unique
-                    items={pagesToshow}
+                    items={pagesToshow[0]}
-                    keys={(item: any)=> item.src}
+                    {...firstPageObj}
-                    initial={{}}
-                    from={{opacity: 1, transform: flagToReverse? "translate3d(-50%, 0, 0)": "translate3d(100%, 0, 0)"}}
-                    enter={{ opacity: 1, transform: "translate3d(0%, 0, 0)" }}
-                    leave={{ opacity: 0, transform: flagToReverse? "translate3d(100%, 0, 0)": "translate3d(-50%, 0, 0)"}}
                 >
                     {
-                        currIndex=> style=>{
+                        image=> style=>{
                             return(
                                 <animated.div style={{
                                     ...style,
                                     }}>
-                                    {React.createElement(()=>{
+                                    {React.createElement(()=>{        
-                                        return <PageComponent width={"50%"} src={pagesToshow[0]? pagesToshow[0].src: null}/>
+                                        return <PageComponent width={"50%"} src={image? image.src: null}/>
                                     })}
                                 </animated.div>
                             )
@@ -59,21 +99,17 @@ export default function TwoPagesView(props: any) {
                 <Transition
                     reset
                     unique
-                    items={pagesToshow}
+                    items={pagesToshow[1]}
-                    keys={(item: any)=> item.src}
+                    {...secondPageObj}
-                    from={{opacity: 1, transform: flagToReverse? "translate3d(0%, 0, 0)": "translate3d(150%, 0, 0)"}}
-                    enter={{ opacity: 1, transform: "translate3d(50%, 0, 0)" }}
-                    leave={{ opacity: 0, transform: flagToReverse? "translate3d(150%, 0, 0)": "translate3d(0%, 0, 0)"}}
-                    initial={{}}
                 >
                     {
-                        currIndex=> style=>{
+                        image=> style=>{
                             return(
                                 <animated.div style={{
                                     ...style,
                                     }}>
                                     {React.createElement(()=>{
-                                        return <PageComponent width={"50%"} src={pagesToshow[1]? pagesToshow[1].src: null}/>
+                                        return <PageComponent width={"50%"} src={image? image.src: null}/>
                                     })}
                                 </animated.div>
                             )