I seem to have a problem with my Material UI component. I just can't get it to display in spite of several rereadings (plus checks on other projects where I have exactly the same thing).

Thanks to a console.log I know that I am browsing my component, I also know that my result.map(index, i) is working because I can also display in my console the information of this index.

It's probably an oversight, but I really don't see where.
Yet I have no errors, not even in the console

Here is the full code of my page :

```js
const index = () => {

    // TimeLine
    const [result, setResult] = useState([]);

    useEffect(()=>{
        axios.get('/api/timeLine_siinfra').then((response) => {
          setResult(response.data)        
        });
    }, []);

    const classes = useStyles();

    const TimeLineAffichage = result.map((index, i) => {
        let isEven = i % 2 === 0,
        titleComponent = (
                <Grid item>
                    <Typography style={{ fontFamily: 'Poppins', fontWeight: 300 }} variant="h6" component="h1">
                        {index.sif_titre}
                    </Typography>
                    <Typography style={{ fontFamily: 'Poppins', fontSize: 'smaller', fontWeight: 200 }} className="font-face-poppins">
                        {index.sif_msg}
                    </Typography>
                </Grid>
        );

        <TimelineItem className={classes.timelineStyle}>
            <TimelineOppositeContent>
                <Typography style={{ fontFamily: 'Poppins', fontWeight: 300 }} variant="body2" color="textSecondary">
                    {index.sif_date}
                </Typography>
            </TimelineOppositeContent>
            <TimelineSeparator>
                <TimelineDot className={classes.dot}>
                    <LaptopMacIcon />
                </TimelineDot>
                <TimelineConnector />
            </TimelineSeparator>
            <TimelineContent>
                <Paper elevation={3} className={classes.paper}>
                    <Grid container style={{ display: 'flex', flexWrap: 'nowrap' }}>
                        {isEven && titleComponent}
                        <Grid container alignItems="center">
                            {isEven
                                ?
                                <Zoom overlayBgColorStart='rgba(73, 80, 87, 67)' overlayBgColorEnd='rgba(73, 80, 87, 67)' zoomMargin={50}>
                                    <img src={index.sif_image} alt={index.sif_image} className={classes.img} style={{ maxWidth: 200, maxHeight: 200, marginLeft: '10px' }} />
                                </Zoom>
                                :
                                <Zoom overlayBgColorStart='rgba(73, 80, 87, 67)' overlayBgColorEnd='rgba(73, 80, 87, 67)' zoomMargin={50}>
                                    <img src={index.sif_image} alt={index.sif_image} className={classes.img} style={{ maxWidth: 200, maxHeight: 200, marginRight: '10px' }} />
                                </Zoom>}
                        </Grid>
                        {!isEven && titleComponent}
                    </Grid>
                </Paper>
            </TimelineContent>
            {console.log("I'm HERE !!!!")}
            {console.log(index, i)}
        </TimelineItem>
    }) 

    return (
        <div>
            <Timeline align="alternate">
                {TimeLineAffichage}
            </Timeline>
        </div>
    )
}

export default index;

```

Thanks for any help on my topic.
(I sincerely hope that the problem is more complex than a forgetfulness)

EDIT : Adding a return() in my component was enough.
Still don't know for other projects why it's was working without any return it in.