Why is this React/Javascript object undefined?

Question

So I'm trying to make this JSON into JavaScript objects but everything I've tried it's come up undefined. The objects do not work. I have some code here which is the getStaticProps method getting objects from my json file

export async function getStaticProps({ params }) {
  const json = await fetch(" /* LINK */ ");
  const properties = await json.json();
  const { starDesc, planetDesc, moonDesc, objectDesc } = properties;

  return {
    props: {
      starDesc,
      planetDesc,
      moonDesc,
      objectDesc,
    }
  };
}

And here's the overall structure of my json file...

{
    "starDesc": {
        "starProperties": [{
                "name": "Spectral Type",
                "desc": "The spectral designation of a star."
            },
            {
                "name": "Color",
                "desc": "The color of a star's light. Bluer stars are usually hotter while redder stars are cooler."
            },

        ....

        ]
    },
    "planetDesc": {

        ....

    }

and so on

It's basically just saying all of those objects ( starDesc , planetDesc , moonDesc , objectDesc ) are undefined when they should be new javascript objects right? I don't understand what I'm doing wrong here and any help would be appreciated thanks:)

Edit: Here's the export function. Just a simple test to get something to show up, but it's saying that starDesc.starProperties is undefined

export default function PropertySection(props) {
  return (

    <p>{props.starDesc.starProperties[0].name}</p>
  )
}

Answer 1

Finally was able to get it to work. I believe the problem was that there were props being obtained from the html tag for the object, and additional props tags in the getStaticProps function, so I'm assuming these were conflicting. I ended up fetching the JSON data from a separate page which contains the <PropertySection> tag and just passed the JSON data into it from there. It now works. Thank you all for helping