The import order does not work as expected.

[csbizz]

import { useViewport } from '@/src/contexts/ViewportProvider';
import c from '@/src/utils/constants';
import { css } from '@emotion/react';
import Image from 'next/image';
import Link from 'next/link';

This code is the import that I have currently created.
And the pretier setting I wrote is as follows.

plugins: ['@trivago/prettier-plugin-sort-imports'],
importOrder: [
  '^@pages/(.*)$',
  '^@components/(.*)$',
  '^@contexts/(.*)$',
  '^@hooks/(.*)$',
  '^@layouts/(.*)$',
  '^@utils/(.*)$',
  '^@styles/(.*)$',
  '^[./]',
],
importOrderSeparation: false, 
importOrderSortSpecifiers: true, 
importOrderCaseInsensitive: false, 

I set the path in jsconfig.

"paths": {
  "@/*": ["./*"],
  "@pages/*": ["./pages/*"],
  "@components/*": ["./src/components/*"],
  "@contexts/*": ["./src/contexts/*"],
  "@hooks/*": ["./src/hooks/*"],
  "@layouts/*": ["./src/layouts/*"],
  "@utils/*": ["./src/utils/*"],
  "@styles/*": ["./src/styles/*"]
},

The order I expected and intended is as follows.

// The order of @emotion and next may be different.
import { css } from '@emotion/react';
import Image from 'next/image';
import Link from 'next/link';
import { useViewport } from '@/src/contexts/ViewportProvider';
import c from '@/src/utils/constants';

what should I do?