Why I'm getting error when trying to import axios, Cannot use import statement outside a module

Question

I'm working on a reactjs project where I trying to learn the react-testing library with Jest. In my Login.jsx file when I'm trying to import axios, I'm recieving the following error.SyntaxError: Cannot use import statement outside a module

● Test suite failed to run

Cannot find module 'axios' from 'src/components/Login.jsx'

Require stack:
  src/components/Login.jsx
  src/components/Login.test.js

> 1 | import axios from 'axios';
    | ^
  2 | import { useState } from 'react';
  3 |
  4 | const Login = () => {

  at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:324:11)
  at Object.<anonymous> (src/components/Login.jsx:1:1)

Here you can find my Login.jsx file

import axios from 'axios';
import { useState } from 'react';

const Login = () => {
  const [error, setError] = useState(false);
  const [loading, setLoading] = useState(false);
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [user, setUser] = useState({});

  const handleClick = async (e) => {
    e.preventDefault();
    try {
      const { data } = axios.get(
        'https://jsonplaceholder.typicode.com/users/1'
      );
      setUser(data);
    } catch {
      setError(true);
    }
  };

  return (
    <div className="container">
      <span className="user">{user.name}</span>
      <form>
        <input
          type="text"
          placeholder="username"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
        <input
          type="password"
          placeholder="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <button disabled={!username || !password} onClick={handleClick}>
          {loading ? 'Please Wait' : 'Login'}
        </button>
        <span
          data-testid="error"
          style={{ visibility: error ? 'visible' : 'hidden' }}
        >
          Something went wrong!
        </span>
      </form>
    </div>
  );
};

export default Login;

And here is my package.json file

{
  "name": "react-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "jest": "^27.5.1"
  }
}

I have no idea about this error as I'm a beginner. Can someone help in this issue?