Confusion about handling graphQL data in a Nextjs project - reactjs

Question

I'm building a webpage with Next.js and graphQL, using Apollo as a client.
On on the main page (index.js) I want a "capsules" and "past launches" link. When the user clicks on either of these links, it directs them to a page detailing either the capsules or the past launches, where mission names are displayed. This details page is controlled by [parameters].js
The problem is this: I want render either the name of the capsule or the launch, depending on what the user has clicked on. However, in the data returned from the API call, the name properties are described using different keys: for capsules the key is name and past launches is mission_name. API data as follows:
{
"data": {
"capsules": [
{
"landings": 1,
"missions": [
{
"flight": 14,
"name": "CRS-3"
}
]
}
],
"launchesPast": [
{
"mission_name": "Starlink-15 (v1.0)",
"id": "109"
}
]
}
}
This presents an issue, because when I'm mapping through the returned data in [parameters].js I can only use either name or mission_name to select and render the name property - which isn't useful since I want to dynamically render the name of whatever element the user clicks on.
What's the best way to handle my API data/structure my project so I can render the relevant data, despite different key names?
Here's my index page - please ignore the other links:
index.js
import { useContext } from 'react'
import { LaunchContext } from '../spacexContext'
import Link from 'next/link'
import Card from '../components/Card'
export const Home = () => {
const data= useContext(LaunchContext)
return (
<div>
<Link href = {`/launchesPast`}>
<div>{data.launchesPast.length} launches last year</div>
</Link>
<Link href = {`/launchesUpcoming`}>
<div> Upcoming launches</div>
</Link>
<Link href = {`/missions`}>
<div>Missions</div>
</Link>
<Link href = {`/payloads`}>
<div> Payloads</div>
</Link>
<Link href = {`/users`}>
<div>Users</div>
</Link>
<Link href = {`/coresPast`}>
<div>Used cores to date</div>
</Link>
</div>
)
}
export default Home
[parameters].js
import { useRouter } from 'next/router'
import { useContext,useState,useEffect } from 'react'
import { LaunchContext } from '../spacexContext'
const Items = () => {
const [path, setPath] = useState("");
const data = useContext(LaunchContext);
const router = useRouter();
useEffect(() => {
if (router.isReady) {
setPath(router.query.parameter);
}
}, [router.isReady]);
return (
<div>
{data &&
path &&
data[path].map((item, i) => {
return (
<>
<p>{item.mission_name}</p>
<p>{item.launch_date_local}</p>
</>
)
})}
</div>
);
};
export default Items;
It occured to me to have some sort of conditional in [paramter].js as follows:
let name
if(item.mission_name){
name = mission_name
} else if (item.name) {
name = item.name
}
...however, this feels like a problematic solutution.