Как передать обьект в компонент astro

Есть json

{
    "columns": [
        {"checked": true, "id":"tab-btn-1", "name": "one", "label": "Для встреч"},
        {"checked": false, "id":"tab-btn-2", "name": "two", "label": "Для вебинаров"},
        {"checked": false, "id":"tab-btn-3", "name": "three", "label": "Для организаций"},
        {"checked": false, "id":"tab-btn-4", "name": "three", "label": "Для организаций"},
        {"checked": false, "id":"tab-btn-5", "name": "three", "label": "Для организаций"}
    ],
    "rows": [
      {
        "id": "content-1", 
        "text": "text1",
        "tariff": [
            {
                "name": "free",
                "alias": "webinars-classic-free",
                "line": "Classic Meetings PRO",
                "line_id": 1,
                "price": 0,
                "options": [
                    {
                        "name": "Кол-во участников",
                        "type": "string",
                        "value": "1",
                        "info": ""
                    },
                    {
                        "name": "Файловое хранилище",
                        "type": "string",
                        "value": "от 5 гб",
                        "info": ""
                    },
                    {
                        "name": "Корпоративный «Мессенджер»",
                        "type": "boolean",
                        "value": 0,
                        "info": ""
                    }
                ]
            }
        ]},
      {"id": "content-2", "text": "text2"},
      {"id": "content-3", "text": "text4"}, 
      {"id": "content-4", "text": "text5"}, 
      {"id": "content-5", "text": "text6"} 
      
    ]
}

Я его перебираю получая путем import { columns, rows } from "./tariffs.json";

columns.map((item) => {...} //все получается, колонки формируются

Я пытаюсь передать его в компонент

<Test test={rows.tariff}/>

Но получаю ошибку [object Object], то есть map сначало перебрал полученный обьект, но глубже он почему то не хочет его передавать компонет tariffs

---
import Title from "./Title.astro";
import ForMeetings from "./ForMeetings.astro";
import Container from "../../../shared/Container.astro";
import { columns, rows } from "./tariffs.json";
// import test from "./test.js"
---

<section class="wrapper_tarifs">
    <Container className="flex flex-col midmd:flex-row gap-10 lg:gap-12">
        <div>
            <div class="text-left mx-auto">
                <Title>Тарифы</Title>
            </div>
            <div class="container">
                <div class="tab">
                
                    {
                        columns.map((item) => {
                            return (
                                
                                    <input
                                        checked={`${item.checked}`}
                                        id={`${item.id}`}
                                        name="tab-btn"
                                        type="radio"
                                        value=""
                                    />
                                    <label for={`${item.id}`}>
                                        {item.name}
                                    </label>
                                
                            );
                        })
                    }
                    {
                        rows.map((item) => {
                            return (
                                <div class="tab-content" id={`${item.id}`}>
                                    <ForMeetings  tariffs={item.tariff}/>
                                </div>
                            );
                        })
                    }                  
                </div>
            </div>
        </div>
    </Container>
</section>

После пытаюсь также дальше такой же обьект в компонент который хочу также перебрать обьект что б его нарисовать внутри ForMeetings

---
import AdditionalModules from "../AdditionalModules.astro";
import Systems from "./Systems.astro";

const { tariffs } = Astro.props;
---

<div class="button_wrapper">
  <div class="inner_button">
    {
      tariffs.map((item) => {
        return <button>{item}</button>;
      })
    }
  </div>
</div>

но в этот раз он мне пишет ошибку, хотя в родительском компоненте такой фокус прокатывает

JSON

{
    "columns": [
        {"checked": true, "id":"tab-btn-1", "name": "one", "label": "Для встреч"},
        {"checked": false, "id":"tab-btn-2", "name": "two", "label": "Для вебинаров"},
        {"checked": false, "id":"tab-btn-3", "name": "three", "label": "Для организаций"},
        {"checked": false, "id":"tab-btn-4", "name": "three", "label": "Для организаций"},
        {"checked": false, "id":"tab-btn-5", "name": "three", "label": "Для организаций"}
    ],
    "rows": [
      {"id": "content-1", "text": "text1"},
      {"id": "content-2", "text": "text2"},
      {"id": "content-3", "text": "text4"}, 
      {"id": "content-4", "text": "text5"}, 
      {"id": "content-5", "text": "text6",
      "tariff": [
        {
            "name": "free",
            "alias": "webinars-classic-free",
            "line": "Classic Meetings PRO",
            "line_id": 1,
            "price": 0,
            "options": [
                {
                    "name": "Кол-во участников",
                    "type": "string",
                    "value": "1",
                    "info": ""
                },
                {
                    "name": "Файловое хранилище",
                    "type": "string",
                    "value": "от 5 гб",
                    "info": ""
                },
                {
                    "name": "Корпоративный «Мессенджер»",
                    "type": "boolean",
                    "value": 0,
                    "info": ""
                }
            ]
        }
    ]} 
      
    ]
}