React Router Link can't clone function - reactjs

Question

I'm practicing my React and stumbled upon something I couldn't find the answer on the internet.
The context is: I'm making a page using the Random User API. On the main page the user navigating can browse through random people and add them to a list. Additionally, the user can click on a person's name and go to a page with more details about that person. I configured the route using React Router Dom and a Link attached to the thumbnail. So far so good.
The problem is that when I decided to test some kind of constructors on this project, so when I fetch the person's info object from the API, I use a mini-constructor to add a few methods to it. Something like that:
function Person(person) {
return {
...person,
getFullName: () => `${person.name.first} ${person.name.last}`
}
}
const data = await fetchPerson();
addPerson(Person(data));
So, on the main page there's no problem. I call getFullName() inside a <p> tag and it displays the name perfectly. But when I try to send this constructed Person object containing both the information and the method via <Link>'s state, I get an error saying that the function can't be cloned. Note: I tried using a class constructor as well. The error is the following:
DataCloneError: Failed to execute 'pushState' on 'History': person => `${this.person.name.title} ${this.person.name.first} ${this.person.name.last}` could not be cloned.
I've tried declaring the function inside the Person functions and then referencing it inside the return and many other things but nothing seems to work.
If I could have a light on the question, it'd be nice!
Thanks! :))
EDIT:
I tried declaring the function outside the "constructor" and it worked. But it isn't very clean. If any other suggestions/explanations surface I'd really like to now!
const getFullName = (person) => `${person.name.title} ${person.name.first} ${person.name.last}`;
export class Person {
constructor(person) {
this.person = person;
this.getFullName = getFullName(person);
this.test = 'IOEJASIEPASKEKASÇLEKÇASKEA'
}
}
EDIT2: Tried with a function aswell, like the following, and worked. But I just can't understand the "cannot clone" error.
export function Person(person) {
const getFullName = (person) => `${person.name.title} ${person.name.first} ${person.name.last}`;
return {
...person,
fullName: getFullName(person) ,
}
}