How do i pass the path for a component as a prop?

Question

I am using react-router-dom@6 to route my components. I am currently trying to link a component and am trying to pass the the path to the child component.

export default function MediaCard(props){
    return(
            <Card
                
                sx = {{maxWidth: 400}} 
                    style={{margin: '2%',
                            backgroundColor:'#E0E0E0'
                }}
            >
                <CardActionArea component={Link} to={props.page}>
                    <CardMedia
                        component = "img"
                        height = "300"
                        image = {props.picture}
                        
                    />
                    
                        <CardContent>
                            <Typography gutterBottom variant ="h6" component="div" style={{fontFamily: 'Roboto Mono'}}>
                                {props.title}
                            </Typography>
                            <Typography variant ="body2" color="text.secondary" style={{fontFamily: 'Roboto Mono'}}>
                                {props.about}
                            </Typography>
                        </CardContent>
                </CardActionArea>

            </Card>
    );
}

when trying to pass the path name to the {props.page} I am getting an error, but when putting the actual path into it, it will work, but it wont work for my use case.