Show deep field source in Api Platforms Admin list

I am using the newest Api Platform Admin component and I am trying to show on the Ingredients list a name of Category instead of it's API IRI. As you can see below Category.name is empty.

I've List defined:

const ingredientsList = props => (
    <ListGuesser {...props}>
        <FieldGuesser source="name" />
        <FieldGuesser source="category" />
        <TextField source="category.name" />
        <FieldGuesser source="description" />
    </ListGuesser>
);

When I look at my Browser Network card I see a reponse from my API like below.

{
   "@context":"\/api\/contexts\/Ingredient",
   "@id":"\/api\/ingredients",
   "@type":"hydra:Collection",
   "hydra:member":[
      {
         "@id":"\/api\/ingredients\/1",
         "@type":"Ingredient",
         "name":"Orange",
         "category":{
            "@id":"\/api\/ingredient_categories\/1",
            "@type":"IngredientCategory",
            "name":"fruits"
         },
         "description":"Orange."
      }
   ],
   "hydra:totalItems":1
}

But when I do a console.log in custom-defined MyTextField that's based on "Writing your own component" part of React-admin documentation in my Console I see:

{
   "@id":"/api/ingredients/1",
   "@type":"Ingredient",
   "name":"Orange",
   "category":"/api/ingredient_categories/1",
   "description":"Orange.",
   "id":"/api/ingredients/1"
}

What's going on here? Why the object in console.log is different and how to show Category name instead of IRI in the list?

from Show deep field source in Api Platforms Admin list