Conditional Render react-card-flip children based on a button or else 1 frontside 2 backsides

is the following im trying to do possible with the react-flip-package?

Basically my front side is a card with 2 buttons. When i click the one button id like to flip into one backside and if i click to the other button i want to flip on another different backside.

https://codesandbox.io/s/cool-sunset-pfjjln?file=/src/App.js

Heres my code.

import CardContent from '@mui/material/CardContent'
import { IconButton, Box } from '@mui/material'
import TrainIcon from '@mui/icons-material/Train'
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
import ReactCardFlip from 'react-card-flip'
import CardDestination from './CardDestination'
import CardBrowsePlan from './CardBrowsePlan'
import React from 'react'

function CardTrial() {
    const [isFlipped, setIsFlipped] = React.useState(false)

    const handleClick2 = () => {
        setIsFlipped(!isFlipped)
    }

    return (
        <ReactCardFlip isFlipped={isFlipped} flipDirection="horizontal">
            {/* front */}
            
                <Card>
                    <CardContent>
                        <IconButton onClick={handleClick2}>
                            <TrainIcon sx= />
                        </IconButton>

                        <IconButton onClick={handleClick2}>
                            <ExpandMoreIcon sx= />
                        </IconButton>
                    </CardContent>
                </Card>
            

            {/* back */}

            <Box>
                <CardDestination flip2={handleClick2} />
                <CardBrowsePlan flip2={handleClick2} />
            </Box>
        </ReactCardFlip>
    )
}

export default CardTrial

Right now i have my children in a box and obviously they both turn when i click any of the 2 buttons. (also passing props so they can turn back) How do i go about this? Thanks!

Via Active questions tagged javascript - Stack Overflow https://ift.tt/NLqKbyf