Where does the dependency on user come from?

Question

JavaScript

Good night
There is a code:

const block = {
    "author": {
      "url": "/",
      "name": "Nikulio"
    },
    "text": "Hello, bEAtch",
    "date": "Recently"
  }

  function Comment(props) {
    return (
        <div className="Comment">
          <UserInfo user={props.author}/>
          <div className="Comment-text">
            {props.text}
          </div>
        </div>
    );
  }
  function UserInfo(props) {
    return (
        <div className="UserInfo">
          <Avatar user={props.user}/>
          <div className="UserInfo-name">
            {props.user.name}
          </div>
        </div>
    );
  }
  function Avatar(props) {
    return (
        <img className="Avatar"
             src={props.user.url}
             alt={props.user.name}
        />
    )
  }

I'm just learning React. In general, everything is clear, but it is not clear where it comes from in this line
<Avatar user={props.user}/>
Where did we get user from here and where did this user come from? It turns out something like props.author.user? After all, we have already passed the required author object to the argument of the UserInfo component.
I hope I explained the problem clearly.
Thanks for the clarification .

Answer 1

Your order of passing props in components looks like this: Comment -> UserInfo -> Avatar
Comment passes an object in the user property:

{
       "url": "/",
      "name": "Nikulio"
}

Therefore, this object is now available in UserInfo via props.user. In Avatar, the same object is also passed as the user property.
Therefore, the Avatar will have an object in props:

{
    user: {
        url...
        name....
    }
}

Therefore, in Avatar, the values ​​of these properties can be accessed: props.user.url , props.user.name