Problem regarding ContextAPI

When the User is Logged in, the user details should be stored in a UserContext state.

The Problem is that when I import and use the UserContext in a component, it throws a 500 INTERNAL SERVER ERROR.

Error seen on the Webpage

Now here it is seen that the error is in the UserContext.js file.

import { createContext, useState } from "react";

export const UserContext = createContext(null);

export default function UserProvider ({ children }) {
    const [user, setUser] = useState({});
    return (
        <UserContext.Provider value={{ user, setUser }}>
            {children}
        </UserContext.Provider>
    )
}

above provided is the UserContext.js file

import { UserContext } from '../context/UserContext';

const Login = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const { setUser } = useContext(UserContext);

  const handleLogin = useCallback(async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post("http://localhost:3000/api/auth/login", {
        email,
        password
      });
      if (response.status === 200) {
        toast.success('Login Success', {
          position: "top-right",
          autoClose: 3000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          theme: "light",
          transition: Slide,
        });
        setUser(response.data);

This is the Login.jsx page where I am using the UserContext to set the logged in state of current user.

The error states the following

[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
D:/Programming/projects/blogApp/client/src/context/UserContext.js:12:3
    at formatError (file:///D:/Programming/projects/blogApp/client/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:50863:46)
    at TransformContext.error (file:///D:/Programming/projects/blogApp/client/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:50857:19)
    at TransformContext.transform (file:///D:/Programming/projects/blogApp/client/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:66033:22)
    at async Object.transform (file:///D:/Programming/projects/blogApp/client/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:51172:30)
    at async loadAndTransform (file:///D:/Programming/projects/blogApp/client/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:53923:29)
    at async viteTransformMiddleware (file:///D:/Programming/projects/blogApp/client/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:63775:32

Overview

I am working on a Blog Application in MERN Stack, in which I am using Vite-ReactJS for the frontend. I tested the Login and register APIs and both are working perfectly fine, even in catching errors.

Trials

I wrapped the App.jsx inside the UserProvider and also checked the path is correct or not.

I thought this might be a problem with the API, but I am not making any request to the APIs still this error is occuring