React mapping nested data

I'm having a problem with my React app. When I post a new project to my backend, I click the button to return me to the site dashboard where I can view a list of projects, I get the following error:

Uncaught TypeError: Cannot read property 'name' of undefined

Main.jsx

Map Function:

{props.sites.map((site) => (
 <tr key={site.id}>
 <td data-label="Project">{site.site.name}</td>
          ... //remaining code

However, if I reload the page, all the data is shown.

In React Developer Tools, if I look at how props are passed, I can see name as one of the pieces of available data.

|_sites
  |_ 0
   |_id" 22
   |_site
      |_id: 44
      |_name: "test"

However, name is nested under site which is nested under sites.

When using the .map function, I have to use the keyword site to render a list of sites. Is this causing a conflict with the keyword site that is already in my backend data structure?

    this.state = {
      sites: [],
      siteFormData: {
        name: '',
      },
   }

If so, what is the best practice to fix this?