Estoy tratando de mostrar un ícono de insignia cuando un componente tiene notas adjuntas. Lo he intentado de tres maneras y obtengo los mismos resultados que me parecen extraños. ¿Cuál es la mejor manera de implementar esto? O hay otra manera

primero importe Badge desde '@material-ui/core/Badge';

 function NotesBadge({ hasNotes }) { return ( <Badge anchorOrigin={{ vertical: 'top', horizontal: 'right',}} variant="dot" color="primary" invisible={hasNotes}> </Badge> ); } export default NotesBadge;

segundo

 import Badge from '@material-ui/core/Badge'; function NotesBadge({ hasNotes }) { return ( <Badge anchorOrigin={{ vertical: 'top', horizontal: 'right',}} variant="dot" color="primary" invisible={!hasNotes}> </Badge> ); } export default NotesBadge;

tercera

 import Badge from '@material-ui/core/Badge'; function NotesBadge({ hasNotes }) { if(hasNotes){ return ( <Badge anchorOrigin={{ vertical: 'top', horizontal: 'right',}} variant="dot" color="primary" invisible={false}> </Badge> ); } } export default NotesBadge;