i dont know where is the trouble. but when i tried to login, it dont wanna navigate into the next pages and stuck in modal login. please tell me whats wrong with my code?

let navigate = useNavigate();
const dispatch = useContext(UserContext);
const state = useContext(UserContext);
// console.log(state);
const [form, setForm] = useState({
  email: "",
  password: "",
});

const { email, password } = form;
const handleChange = (e) => {
  setForm({
    ...form,
    [e.target.name]: e.target.value,
  });
};

const handleSubmitLog = async (e) => {
  try {
    e.preventDefault();
    const config = {
      headers: {
        "Content-type": "application/json",
      },
    };
    const body = JSON.stringify(form);
    const response = await API.post("/login", body, config);
    console.log(response.data);

    if (response?.status == 200) {
      dispatch({
        type: "LOGIN_SUCCESS",
        payload: response.data.data,
      });
      
      if (response.data.data.status == "admin") {
        navigate('/admin')
      } else {
        navigate('/userid')
      }
    }
  } catch (error) {
    console.log(error);
  }
}

here is the response in console, i dont know why this dispatch can not work well

{
    "status": "Success",
    "data": {
        "users": {
            "name": "mr.x",
            "email": "mr.x@mail.com",
            "token": "asfsa"
        }
    }
}

TypeError: dispatch is not a function
    at handleSubmitLog (header.js:59:1)

and here is the body from userContext file. please check it and tell me if my code is wrong

export const UserContext = createContext();

const initialState = {
  isLogin: false,
  user: {},
};

const reducer = (state, action) => {
  const { type, payload } = action;

  switch (type) {
    case "USER_SUCCESS":
    case "LOGIN_SUCCESS":
      localStorage.setItem("token", payload.token)
      return {
        isLogin: true,
        user: payload,
      };
    case "AUTH_ERROR":
    case "LOGOUT":
      localStorage.removeItem("token")
      return {
        isLogin: false,
        user: {},
      };
    default:
      throw new Error();
  }
};

export const UserContextProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);

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