What is the differences among "top of the component", "importing from another file" in terms of performance in react js?

What are the differences among

1. Importing an object on top of the component
2. Creating an object on top of the component vs
3. Inside the function body vs

in terms of performance?

// Importing an object on top of the component
import { person } from 'constants.js'
function Person () {
    return <div>
         <h1>{person.name}</h1>
         <h2>{person.surname}</h2>
         <h3>{person.age}</h3>
         <h4>{person.gender}</h4>
    </div>
} 

// creating person object on top of the component (is this pollute global?)
const person = {
    name: 'John',
    surname: 'Doe',
    age: 50,
    gender: 'male'
}

function Person () {
    return <div>
         <h1>{person.name}</h1>
         <h2>{person.surname}</h2>
         <h3>{person.age}</h3>
         <h4>{person.gender}</h4>
    </div>
} 

// creating person object on each render (maybe thousands of times)
function Person(){
     const person = {
        name: 'John',
        surname: 'Doe',
        age: 50,
        gender: 'male'
    }
    
    return <div>
         <h1>{person.name}</h1>
         <h2>{person.surname}</h2>
         <h3>{person.age}</h3>
         <h4>{person.gender}</h4>
    </div>  
}

I tend to use the first approach. That way, I can also import the person obj in my test file (person.test.js). Although it seems good, it's better to learn if there are any cons to doing it this way.