Why loadable creates different chunk modules for the same component?

Question

I'm new in loadable components. Wonder why loadable creates different chunk modules for the same component? Is it normal? Because I feel like it affects performance of the site.

import loadable from "@loadable/component";

const LoadableHeader = loadable(() =>
  import(/* webpackChunkName: "Header" */ `./Header`)
);

const LoadableFooter = loadable(() =>
  import(/* webpackChunkName: "Footer" */ `./Footer`)
);
const LoadableFooter = loadable(() =>
  import(/* webpackChunkName: "CityPage" */ `./CityPage`)
);

etc

and this how it looks in console network:

For ex, CityPage component 8 times ... is it possible to make just one for each?