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

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(
}, [])

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