Unable to get proper node and edge data in a react antv/g6 application

I'm trying to load data from the redux store into a react, Antv/G6 application. But the returned data differs in its edge and node properties. For instance, an edge element when fetched from the redux store is like

{source: '0', target: '1', label: 'e0-1', weight: 1}

and when it's fetched directly without using redux is

{source: '0', target: '1', label: 'e0-1', weight: 1, id: 'edge-0.32391998111904051663832636010', …}

The method to fetch data from the exampleSlice.ts slice is

export const fetchExampleData = createAsyncThunk(
  "example/fetchExampleData",
  async () => {
    const response = await fetch("https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json");
    const data = await response.json();
    return data;
  }

Inside the component, the data getter hook useAppSelector returns the data

const data = useAppSelector((state) => state.example.data);

The data had required properties when I tried to load the data locally or when fetched directly inside the useEffect hook inside the component. But when fetched from the redux store it's an undesired result. What I'm doing wrong? Any help or suggestion would be beneficial.