Add vertical lines between the sections and that these lines be red - material-ui

Question

How can I add a "vertical line" between the three columns, that is, between the three sections.
That is, I want to add a cloud between the first and second sections, and I want to add a column between the second and third sections.
And this file was designed in which the interface shown in the image was designed, and three sections were added, and each section contains a number of elements.
import type {FC} from 'react';
import {
Box, Button,
Card,
CardContent,
CardHeader,
List,
ListItem,
Avatar,
ListItemIcon,
ListItemAvatar,
ListItemText,
Grid
} from '#material-ui/core';
import InboxIcon from '#material-ui/icons/Inbox';
import DraftsIcon from '#material-ui/icons/Drafts';
import Divider from '#material-ui/core/Divider';
import {makeStyles} from "#material-ui/core/styles";
import {blue} from "#material-ui/core/colors";
const useStyles = makeStyles((theme)=>({
driver:{
// border: '0.25px solid #e9ebf0'
background: '#e9ebf0'
// background: theme.palette.divider,
}
}));
const WorkspacesInviteUser: FC = (props) => {
const classes = useStyles();
return (<>
<Card style={{maxWidth: '35rem',minWidth: '35rem', borderRadius: '0.6rem', background: '#fff'
}}>
<Grid
container
spacing={0}
xs={12}
md={12}
>
{/*first Column*/}
<Grid container item xs={2} style={{ backgroundColor: 'blue', paddingBottom:'5rem',
paddingTop:'0.5rem'}}>
{/* Avatar*/}
</Grid>
<Divider orientation="horizontal" variant="fullWidth" className={classes.driver}/>
{/*second Column*/}
<Grid container item xs={5} style={{backgroundColor: 'blue',
paddingBottom:'5rem',paddingTop:'0.5rem'}}>
<List component="nav" aria-label="main mailbox folders" style={{ paddingLeft:
'1rem' , fontSize: '12px' , color: '#292d34', lineHeight: 1}}>
<ListItem button style = {{
fontWeight: 500,
fontSize: '11px',
lineHeight: 1,
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
color: '#292d34'
}}>
<ListItemAvatar>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
</ListItemAvatar>
<ListItemText>Ali Baba {/*Workspaces*/}</ListItemText>
</ListItem>
<ListItem button>
<ListItemText primary="Settings"/>
</ListItem>
<ListItem button>
<ListItemText primary="Import/Export"/>
</ListItem>
<ListItem button>
<ListItemText primary="People"/>
</ListItem>
<ListItem button>
<ListItemText primary="Spaces"/>
</ListItem>
<ListItem button>
<ListItemText primary="Integrations"/>
</ListItem>
<ListItem button>
<ListItemText primary="Template Center"/>
</ListItem>
<ListItem button>
<ListItemText primary="Trash"/>
</ListItem>
<ListItem button>
<ListItemText primary="Security & Permissions"/>
</ListItem>
</List>
</Grid>
{/*Third Column*/}
<Grid container item xs={5} style={{backgroundColor: 'blue', paddingBottom:'5rem',
paddingTop:'0.5rem'}}>
<List component="nav" aria-label="main mailbox folders" style={{paddingLeft:
'1rem' , fontSize: '12px' , color: '#292d34', lineHeight: 1}}>
<ListItem button>
<ListItemAvatar>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
</ListItemAvatar>
<ListItemText>Ali Baba</ListItemText>
</ListItem>
<ListItem button>
<ListItemText primary="My Settings"/>
</ListItem>
<ListItem button>
<ListItemText primary="Notifications"/>
</ListItem>
<ListItem button>
<ListItemText primary="Layout size & style"/>
</ListItem>
<ListItem button>
<ListItemText primary="Rewards"/>
</ListItem>
</List>
<Divider variant="middle"/>
<List component="nav" aria-label="main mailbox folders" style={{paddingLeft:
'1rem' , fontSize: '12px' , color: '#292d34', lineHeight: 1}}>
<ListItem button divider>
<ListItemText primary="Log out"/>
</ListItem>
<ListItem button>
<ListItemText primary="Help"/>
</ListItem>
<ListItem button>
<ListItemText primary="Hotkeys"/>
</ListItem>
<ListItem button>
<ListItemText primary="Dark mode"/>
</ListItem>
</List>
</Grid>
</Grid>
</Card>
</>)
};
export default WorkspacesInviteUser;

Answer 1

You can add borderRight={1}, You can benefit from Docs:
https://material-ui.com/system/borders/
And you will get what you want.