ارسال کردن یک فیلد جهت تکرار

سلام علیکم استاد،

خسته نباشید.

این کدهای من هست و خطا می دهد، لطفا برایم بگوئید چه کار اشتباهی انجام میدهم که خطا می دهد و درستش را برایم بنویسید. با تشکر.

من هر کاری کردم، فقط میخواهم یک فیلد را ارسال و مقادیرش را چاپ کند "مثلا فقط اسم ها را چاپ کند". نمی خواهم کل آرایه را ارسال کنم بعد یکی را تکرار و چاپ کند.

یعنی با این روش "<Persons data={persons.fName} />" می شود وگرنه میتونم 1 فیلد رو بگیرم. و اشکال کار رو هم بگین، با تشکر.

import React, { Component } from "react";
import Persons from "./Components/Person/Persons";

class App extends Component {
    state = {
        persons: [
            {fName: 'شاهین', lName: 'سیفی آلاگوز', Age: 34},
            {fName: 'زهرا', lName: 'مدنی', Age: 30},
            {fName: 'صغری', lName: 'مدنی', Age: 26}
        ]
    }
    render() {
        const {persons} = this.state;
        return (
            <div>
                <h1> بسم الله الرحمن الرحیم </h1>
                <Persons data={persons.fName} />
            </div>
        )
    }
}

export default App;

کامپوننت دیگرم

import React from "react";


const Persons = (data) => {
    return(
        <div>
            {
                data.map(p => (
                    <p> {p} </p>
                ))  
            }   
        </div>
    )
};

export default Persons;

یا این خطا را میدهد

TypeError: data.map is not a function

یا هم با تغئیر در کد کامپوننت Persons این خطا را میدهد

import React from "react";


const Persons = ({data}) => {
    return(
        <div>
            {
                data.map(p => (
                    //----- 1st Way - Without sending to Another component -----
                    //<p> {`${p.fName} ${p.lName} ${p.Age} سال دارم`} </p>

                    //----- 2nd Way - By sending to Another component -----
                    //<Person firstname={p.fName} lastname={p.lName} age={p.Age}/>     

                    <p> {p} </p>
                ))  
            }   
        </div>
    )
};

export default Persons;

TypeError: Cannot read properties of undefined (reading 'map')

یا هم با تغئیر دیگری این خطا را میدهد

import React from "react";


const Persons = ({data}) => {
    return(
        <div>
            {
                data.fName.map(p => (
                    //----- 1st Way - Without sending to Another component -----
                    //<p> {`${p.fName} ${p.lName} ${p.Age} سال دارم`} </p>

                    //----- 2nd Way - By sending to Another component -----
                    //<Person firstname={p.fName} lastname={p.lName} age={p.Age}/>     

                    <p> {p} </p>
                ))  
            }   
        </div>
    )
};

export default Persons;

TypeError: Cannot read properties of undefined (reading 'fName')