sort order import in react using cra

I am trying to update my project's configuration to sort the import order. I'm using create-react-app, and have been following the instructions in this article. Here's what I've done so far:

1. Run yarn add eslint-plugin-import -D.
2. Added a .eslintrc.js in src folder of my application.
3. Added the following configuration as mentioned in the article:

module.exports = {
  extends: "react-app",
  plugins: ["eslint-plugin-import"],
  "import/order": [
    "error",
    {
      groups: ["builtin", "external", "internal"],
      pathGroups: [
        {
          pattern: "react",
          group: "external",
          position: "before",
        },
      ],
      pathGroupsExcludedImportTypes: ["react"],
      "newlines-between": "always",
      alphabetize: {
        order: "asc",
        caseInsensitive: true,
      },
    },
  ],
};

I've written the following sample component and changed the order of import statements to check if this is working, but when I save the order is not being updated:

Sample.js

import { PropTypes } from "prop-types";
import React from "react";

const Sample = () => <div>Hello</div>;

export default Sample;

Expected after saving

Sample.js

import React from "react";

import { PropTypes } from "prop-types";

const Sample = () => <div>Hello</div>;

export default Sample;

I also tried simple-import-sort, but I don't know how to configure it. How can I configure my project so that import statements are automatically kept in order?