Fetching data from API and Displaying response data into a Data grid

I am trying to fetch data from an API. I am getting data in the following format.

data: 
[
{type: 'PropertyDamage', id: '100', attributes: {identification_number: '3931', damage_date: '2021-04-29', report_date: '2021-06-26'}},
{type: 'PropertyDamage', id: '101', attributes: {identification_number: '3839', damage_date: '2021-01-21', report_date: '2021-08-25'}},
{type: 'PropertyDamage', id: '102', attributes: {identification_number: '3735', damage_date: '2021-04-25', report_date: '2021-10-29'}}
]

Below I have implemented the Data grid and tried to import data from API into this data grid.

const columns = [ { field: 'id', headerName: "ID" }, { field: "type", headerName: "TYPE" }];
const Dashboard = () => {
  const theme = useTheme();
  const colors = tokens(theme.palette.mode);
  const [propertydamages, setPropertyDamages] = useState([]);

  useEffect(() => 
    {
        const url = "URL";
            fetch(url, {
            method: "GET",
            withCredentials: true,
            headers: {
                'X-API-Key': 'API Key'
            }
            })
            .then((response) => response.json())
            .then((json) => {
              setPropertyDamages(json)
            } )
            .catch(function(error) {
                console.log(error);
            }, []);
    })

  return (
    <Box m="20px">
      {/* Data Grid */}
        <DataGrid 
            rows = {propertydamages}
            columns = {columns}
        />
    </Box>
  );
};

This is the error poping up into my console log. Nothing is appearing in the data grid(frontend side) Help needed. Thank you in advance.

I tried changing the data into different formats but it was not working.