How to conditionally display a material-ui breadcrumb within a component - reactjs

Question

I'm using mui breadcrumbs within my react app and unsure why I am not seeing the second separator as part of my <MyBreadcrumb /> component.
I am also trying to conditionally display my breadcrumb list but I think now that this could be the issue as it's also placing each breadcrumb item on separate lines.
The main contents looks as follows:
import * as React from 'react';
import Typography from '#mui/material/Typography';
import Breadcrumbs from '#mui/material/Breadcrumbs';
import { Link, useParams } from "react-router-dom";
export default function MyBreadcrumb() {
const { instrument, name } = useParams();
return (
<Breadcrumbs aria-label="breadcrumb">
<Link to={"/"}>
Home
</Link>
{ !instrument ? (
<Typography color="text.primary">{name}</Typography>
) : (
<>
<Link to={-1}>
Musician
</Link>
<Typography color="text.primary">{name} - {instrument}</Typography>
</>
)}
</Breadcrumbs>
)
}
Basically if instrument is undefined then I expect to see the following breadcrumb menu:
Home / Tom
Otherwise if instrument has a value, I then expect to see the following breadcrumb menu:
Home / Musician / Bob - guitar
I believe the issue with the second separator not appearing is because I'm not sure how to conditionally display my breadcrumb menu based on the above rules.

Answer 1

After checking the DOM element, I found something interesting. I have a quick fix for this, but not the best answer I think.
codesandbox: https://codesandbox.io/s/mui-5-forked-fn21v1
import * as React from "react";
import Typography from "#mui/material/Typography";
import Breadcrumbs from "#mui/material/Breadcrumbs";
import { Link } from "react-router-dom";
export default function App() {
const instrument = true ? "guitar" : undefined;
const name = "Tom";
return (
<>
<Breadcrumbs aria-label="breadcrumb">
<Link to={"/"}>Home</Link>
{!instrument && <Typography color="text.primary">{name}</Typography>}
{/* OLD */}
{/* {instrument && (
<>
<Link to={-1}>Musician</Link>
<Typography color="text.primary">
{name} - {instrument}
</Typography>
</>
)} */}
{/* NEW */}
{instrument && <Link to={-1}>Musician</Link>}
{instrument && (
<Typography color="text.primary">
{name} - {instrument}
</Typography>
)}
</Breadcrumbs>
</>
);
}
So the quick fix is to seperate the Musician and {name} - {instrument} element to a different conditional rendering.
DOM screenshot with OLD code:
DOM screenshot with NEW code:
As you can see on OLD code, when we wrap the 2 elements with <>...</>, MUI will convert it into 1 list instead of 2, and meanwhile on the NEW code that we seperate the conditional rendering, MUI generate 2 lists.
I don't know what happen under the hood with MUI, but hope this little quick fix can help.