How to fix: this expression is not callable. Type '{}' has no call signatures.ts(2349)

Hi everyone I am currently facing a type error in my login file as I am not familiar with typescript, when trying to set the response from the api into the user variable inside my handleLogin function and user is represent my context, I am getting this error this expression is not callable. Type '{}' has no call signatures.ts(2349).
Here below are my login.tsx and authContext.tsx files:

Login.tsx:

function Login() {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const [showError, setShowError] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
const [user, setUser] = useContext(UserContext);
const handleLogin = (e: any) => {
e.preventDefault()
setIsSubmitting(true)
setError('')
const genericErrorMessage = 'Something went wrong! Please try again later.'
fetch('http://localhost:8081/users/login', {
method: 'POST',
credentials: 'include',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password }),
})
.then(async response => {
setIsSubmitting(false)
if (!response.ok) {
if (response.status === 400) {
setError("Please fill all the fields correctly!")
} else if (response.status === 401) {
setShowError(true)
setError("Invalid username and password combination.")
} else {
setError(genericErrorMessage)
}
} else {
const data = await response.json()
setUser((oldValues: any) => {
return { ...oldValues, token: data.token }
})
workflow.go(Workflow.Tasks)
}
})
.catch(error => {
setIsSubmitting(false)
setError(genericErrorMessage)
})
}
const handleKeyDown: React.KeyboardEventHandler<HTMLInputElement> = ({ keyCode }) => {
setShowError(false);
if (keyCode === 13) handleLogin();
};

authContext.tsx:

import React, { PropsWithChildren, useState } from "react"
const UserContext = React.createContext([{}, () => { }])
let initialState = {
username: '',
password: '',
}
const UserProvider = (props: PropsWithChildren<any>) => {
const [state, setState] = useState(initialState)
return (
<UserContext.Provider value={[state, setState]}>
{props.children}
</UserContext.Provider>
)
}
export { UserContext, UserProvider }

In this line you're creating context and setting as default value an array containing an empty object and a function that returns an empty object:

const UserContext = React.createContext([{}, () => { }])

Typescript infers that this is the type for the value you're going to be using in this context, which is why it is showing you the error message.

This is not, however, how you should declare a context. You can either give it a meaningful initial value or just null, "", []... if you don't know it beforehand, but if you do the latter you must pass the correct types to the createContext function.

In your case it could be something like this:

interface User {
  username: string;
  password: string;
}

const initialState = {
  username: '',
  password: '',
}

const UserContext = React.createContext<
  [User, React.Dispatch<React.SetStateAction<User>> | null]
>([initialState, null])

// I'd recommend you type children as React.ReactNode
const UserProvider = ({ children }: { children: React.ReactNode }) => {
  const [state, setState] = useState(initialState)

  return (
    <UserContext.Provider value={[state, setState]}>
      {children}
    </UserContext.Provider>
  )
}

export { UserContext, UserProvider }