TypeError: user is undefined

Jadi gini, saya mau me map data yang ada di state saya tetapi parameter user di function saya tidak membaca data dari state

ini File Component saya:

import React,{useState} from 'react'
import { ProfileData } from './Data'

const Profile = () => {
  const [user, setUser] = useState(ProfileData);

  //param yang saya maksud V yang mana harus nya mengarah ke state
  const UserProfile = ({ user }) => {
    return (
      <>
        {user.map((info) => {
          const { id, username, img, banner, recipe, liked } = info;
          return (
            <>
              <Image className="banner-img" src={banner} />
              <div className="text-center">
                <Image src={img} className="profile-img" roundedCircle></Image>
                <h5>{username}</h5>
                <Button variant="outline-dark" className="rounded-pill m-2">
                  Edit your profile
                </Button>
                <Container>
                  <Row>
                    <Col>
                      <h3>{recipe}</h3>
                      <h5>Recipe created</h5>
                    </Col>
                    <div className="line"></div>
                    <Col>
                      <h3>{liked}</h3>
                      <h5>Liked Recipe</h5>
                    </Col>
                  </Row>
                </Container>
                <hr />
             </div>
            </>
          );
        })}
      </>
    );
  };
    return (
        <>
            <UserProfile />
        </>
    )
}

export default Profile;

dan ini file data,js saya

const ProfileData = [
  {
    id: 1,
    banner:
      "https://i.pinimg.com/originals/d3/6d/46/d36d462db827833805497d9ea78a1343.jpg",
    img: "https://static.zerochan.net/Akiyama.Mio.full.415518.jpg",
    email: "iniemail@gmail.com",
    username: "@iniusername",
    recipe: 5,
    liked: 6,
  },
];
export default ProfileData;