How to reach out related data in razor page. EF Core 5.0

Question

I'm trying to get Product data with its ProductComments but I'm getting null error when I ask for it. There is a one-to-many relation between Product and ProductComments.

Let me show you my data access layer:

public interface IRepositoryProduct<T> : IRepository<Product>
{
    List<Product> GetProductWithComment();
}

public class RepositoryProduct<T> : Repository<Product>, IRepositoryProduct<T>
{
    public RepositoryProduct(TradeTurkDBContext context) : base(context) { }

    public List<Product> GetProductWithComment()
    {
        return TradeTurkDBContext.Products.Include(x => x.ProductComment).ToList();
    }
}

And this is my view model class:

public class ProductCommentViewModel
{
    public Product Product { get; set; }
    public List<Product > ProductsC { get; set; }
}

and here is my controller:

var ListProductComment = _unitOfWorkP.RepositoryProduct.GetProductWithComment();
var Product= new Product();
var ProductCommentViewModel = new ProductCommentViewModel
        {
            Product= Product,
            ProductsC= ListProductComment
        };
return View(ProductCommentViewModel);

When I check out if there is a data inside of Product, it tells me there is a 2 comment inside of ProductComments.

Let me show you how I am trying to reach that data in cshtml:

@foreach (var item in Model.ProductsC)
{
    <tr>
        <td class="text-center">
            <div class="dropdown custom-dropdown">
            <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                             class="feather feather-more-horizontal">
                <circle cx="12" cy="12" r="1"></circle>
                <circle cx="19" cy="12" r="1"></circle>
                <circle cx="5" cy="12" r="1"></circle>
            </svg>
            </a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink1" style="will-change: transform;">
                <!-- SONRA YAPILACAK <a class="dropdown-item" href="user_profile.php?userID=">Görüntüle</a>-->
                // this is the point where I get error  
                <a id="@item.ProductComment.CommentID" class="dropdown-item" data-toggle="modal" data-target="#[email protected]">Güncelle</a>
                <a id="@item.ProductComment.CommentID" class="dropdown-item" data-toggle="modal" data-target="#[email protected]">Sil</a>
            </div>
        </div>
    </td>
    <td>@item.ProductComment.CommentID</td>
    <td>@item.ProductComment.ShoppingUserID</td>
    <td>@item.ProductComment.ShoppingUserID</td>
    <td>@item.ProductID</td>
    <td><button class="btn btn-outline-dark mb-2" data-toggle="modal" data-target="#[email protected]">Yorumu Görüntüle</button></td>
    <td>@item.ProductComment.CreatedUserId</td>
    <td>@item.ProductComment.ModifiedUserId</td>
    <td>@item.ProductComment.CreatedUserType</td>
    <td>@item.ProductComment.ModifiedUserType</td>
    <td>@item.ProductComment.CreatedDate</td>
    <td>@item.ProductComment.ModifiedDate</td>
    <td>@item.ProductComment.ProductCommentIsActive</td>
    <td>@item.ProductComment.IsDeleted</td>
</tr>
}

Thanks for any suggestion !

i edit my question but im still gettin that error