My topbar duplicates since adding axios and importing the user image with axios and react

Software Development Project Development
#1

I would like to know why my “topbar” is duplicated when I only want one. And it’s since I did my import of the user image via axios and added the .map in the return. I really don’t understand why if someone could help me that would be nice. Thanks in advance

import "./topbar.css"
import { Search } from '@mui/icons-material'
import { useState, useEffect, Fragment } from 'react'
import axios from "axios"


function Home() {

const [user, setPosts] = useState([])



useEffect(() => {
    console.log("chargement ok")
    const fetchData = async () => {
    const result = await axios.get(
    'http://localhost:4200/api/user/')
    setPosts(result.data)
    }
    fetchData();
}, [])


    return (
        <Fragment>
            { user
            ? user.map((users,topbar) => ( <div key={topbar} className="topBarContainer">
                            <div className="topBarLeft">
                                <span className="logo">Groupomania</span>
                            </div>
                            <div className="topBarCenter">
                                <div className="searchBar">
                                    <Search className="searchIcon" />
                                    <input placeholder="Vous cherchez quelque chose ?" className="searchInput" />
                                </div>
                            </div>
                            <div className="topBarRight">
                                <div className="topBarLinks">
                                    <span className="topBarLink">Page d'acceuil</span>
                                    <span className="topBarLink">Deconnexion</span>
                                </div>
                                <img src={users.picture} alt="Photo de profil de l'utilisateur" className="topBarImg" />
                            </div>
                        </div>))
                    : (<p></p>)
            }
        </Fragment>
        )
}
    
export default Home