I am building a React UI library. I have decided to use @mui/material as a reference for architecture (not completely, but more as an inspiration source). I have noticed that every folder with ESM component scripts has its own package.json file with contents such as:

{
  "sideEffects": false,
  "module": "./index.js",
  "main": "../node/Typography/index.js",
  "types": "./index.d.ts"
}

How is it being used? What is the purpose of having it atomically?