Jest throw babel and syntax error while using typescript

Question

Every time when I tried to run jest --coverage

I will see a lot error which include the file I haven't written any test.

> 26 | type ProductProp = {
     |     ^
  27 |   imgUrl: string;
  28 | };
  29 | const Container = styled.div<ProductProp>`
STACK: SyntaxError: /Users/kai/Documents/SideProject/hardco-Ecommerce/client/src/components/productItem/ProductItem.tsx: Missing semicolon (26:4)

Add @babel/preset-flow (https://git.io/JfeDn) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-flow (https://git.io/vb4yb) to the 'plugins' section to enable parsing.

There are a lot of error messages but most of them are consisted of above message which didn't make any sense.

Here's my .barbelrc and jest setting in package.json

{
    "presets": [
        "@babel/preset-env",
       ["@babel/preset-react", {"runtime": "automatic"}]
    ]
}

"jest": {
    "collectCoverageFrom": [
      "**/*.{ts,tsx}"
    ],
    "coveragePathIgnorePatterns": [
      "/node_modules/",
      "testconfig.js",
      "package.json",
      "package-lock.json"
    ]
  },

Also I installed "@babel/preset-flow": "^7.16.7" and "@babel/preset-react": "^7.16.7" It didn't help.

If anyone know what's going on please let me know. It didn't effect normal testing. But I have to scroll down quite a while to see my coverage, which is annoying.