Слайд в пользовательском интерфейсе материала происходит от края экрана

Question

Слайд в Material UI переход начинается с края экрана, есть ли способ ограничить транзакцию внутри компонента карты. Я разместил код ниже, чтобы подчеркнуть проблему. Моя цель - обеспечить, чтобы переход начинался и заканчивался в пределах границы компонента

Например, в приведенном ниже коде хотелось бы, чтобы переход начинался и заканчивался в компоненте пользовательского интерфейса материала карты

import React from 'react';
import Card from '@material-ui/core/Card';
import { IconButton, CardContent, Slide, Paper } from "@material-ui/core";
import { Settings } from "@material-ui/icons"
import { withStyles } from '@material-ui/core/styles'


const styles = {
    card: {
        minWidth: 560,
    },
    cardContent: {
        padding: 8,enter code here
        display: 'flex',
        justifyContent: 'flex-end'
    },
    smallIcon: {
        width: 36,
        height: 36,
        padding: 0,
    },
    paper: {
        width: "400px",
        height: "320px",
        zIndex: 1,
        position: "absolute",
        backgroundColor: "#000000",
        top: "20%",
    }
}

class SimpleCard extends React.Component {
    // eslint-disable-next-line no-useless-constructor
    constructor(props) {
        super(props)
        this.state = {
            gearIconClick: ""
        }
    }
    chartFilterSlider = (evt) => {
        debugger
        var clicked = evt.currentTarget.translate
        console.log("clicked", clicked)
        this.setState({
            gearIconClick: clicked
        })
    }

    render() {
        const { classes, } = this.props
        const { gearIconClick } = this.state
        //console.log("gearIconClick",gearIconClick)
        return (
            <Card className={classes.card}>
                <CardContent className={classes.cardContent} >
                    <IconButton className={classes.smallIcon} onClick={this.chartFilterSlider}>
                        <Settings />
                    </IconButton>
                    {gearIconClick ?
                        <Slide direction="left" in={true} mountOnEnter unmountOnExit>
                            <Paper elevation={4} className={classes.paper}>
                                hello
                           </Paper>
                        </Slide>
                        :
                        <div></div>
                    }
                </CardContent>
                {this.props.children}

            </Card>

        );
    }
}

export default withStyles(styles)(SimpleCard)



Excepted :
 Is there any way we can limit the transaction inside the card component.

Actual output:
Slider in Material UI comes from the edge of the screen