Material UI, Appbar logo on left, Tabs in the center - css

Question

I make a react material ui AppBar.
There is a logo and tabs.
The tabs should be in the center of the AppBar and the logo on the left.
But I can't make the logo go to the left.
How can I make it to go the left?
I am using mui's Grid system but if there is better solution doesn't matter.
Here is a live example https://codesandbox.io/embed/delicate-feather-mmf3k
const Header = () => {
const classes = useStyles();
const [value, setValue] = React.useState(0);
return (
<nav className={classes.root}>
<AppBar position="static" color="default">
<Toolbar style={{ alignItems: "center", justifyContent: "center" }}>
<Grid justify={"center"} alignItems={"center"} container>
<Grid style={{ justifySelf: "flex-start" }} item>
<img
className={classes.logo}
src={
"https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg"
}
alt="Logo"
/>
</Grid>
<Grid item>
<Grid container justify={"center"}>
<Tabs
onChange={(e, v) => setValue(v)}
value={value}
aria-label="Navigation Tabs"
>
<Tab label={"page 1"} />
<Tab label={"page 2"} />
</Tabs>
</Grid>
</Grid>
</Grid>
</Toolbar>
</AppBar>
</nav>
);
};
In this case both the Logo and Tabs are in the center.
I tired to style justifySelf, alignSelf to flex-start on the logo to no avail.
Adding xs to the second Grid item, makes the logo to go to left but the Tabs are not exactly in the center in this case.

Answer 1

The solution I came up with is to add empty 3rd Grid item.
Justify 'space-between' on the Grid container.
Give xs={1} to the first Grid item, in which is the logo.
Give xs={4} to the tabs Grid item.
Give xs={1} to the third Grid item.
const Header = () => {
const classes = useStyles();
const [value, setValue] = React.useState(0);
return (
<nav className={classes.root}>
<AppBar position="static" color="default">
<Toolbar>
<Grid justify={"space-between"} container>
<Grid xs={1} item>
<img
className={classes.logo}
src={
"https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg"
}
alt="Logo"
/>
</Grid>
<Grid xs={4} item>
<Grid container justify={"center"}>
<Tabs
onChange={(e, v) => setValue(v)}
value={value}
aria-label="Navigation Tabs"
>
<Tab label={"page 1"} />
<Tab label={"page 2"} />
</Tabs>
</Grid>
</Grid>
<Grid item xs={1} />
</Grid>
</Toolbar>
</AppBar>
</nav>
);
};
Working demo: https://codesandbox.io/s/great-cloud-zwghk