My understanding after reading your question, in your code both cards are using the same state as a result when you hover any of them affect both. To make each card behave uniquely you have to make sure each component uses its own state, not common state. For this, my suggestion is to make a new Card component with State and Handler methods. then render it where the cards are rendered right now. like bellow.

New card component:

const CardComponent = (props) => {
    const [checked, setChecked] = useState(false);
    const handleSlide = () => {
        setChecked(!checked);
    };
    return (
        <React.Fragment>
            <Card onMouseEnter={handleSlide} onMouseLeave={handleSlide} sx={{ maxWidth: 345 }}>
                <CardContent>
                    <Typography gutterBottom variant="h5" component="div">
                        {props.title}
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                        Lizards are a widespread group of squamate reptiles, with over 6,000
                        species, ranging across all continents except Antarctica
                    </Typography>
                </CardContent>
                <Slide direction="up" in={checked}>
                    <CardActions>
                        <Button size="small">Button 1</Button>
                        <Button size="small">Button 2</Button>
                    </CardActions>
                </Slide>
            </Card>
        </React.Fragment>
    );
}

Then replace your card with this new card component and pass properties to each card as props.

<CardComponent title={'Card 1'} />
<CardComponent title={'Card 2'} />

I hope this will solve your issue.