login Using redux-toolkit not able to call the hook

Question

I am trying use the hook for the login and that is done by LoginTry function What i have did is inside the LoginTry function i am calling the redux toolkit hook whose purpose to life is to query the url to the backend and give me back the response and it is giving me error that it can be used inside the component function body only but i cant find another way how on click signin button i invoke the hook to perform the login attempt.

import React,{useState,useEffect} from 'react'
import { useLoginQuery } from '../../actions/userAction'

const Login = () => {

    const [loginEmail, setLoginEmail] = useState("");
    const [loginPassword, setLoginPassword] = useState("");

    const [user, setUser] = useState({
        name: "",
        email: "",
        password: "",
    });

    const LoginTry=() =>{
        const cred = {
            email:loginEmail,
            password:loginPassword,
        }
        const responseInfo = useLoginQuery(cred)
        console.log(responseInfo)
        console.log("The login Email is "+loginEmail+"The login passowrd is"+loginPassword)
    }
    return (
        <>
            <div className="block p-6 rounded-lg shadow-lg bg-white max-w-sm my-2 mx-auto">
                <form>
                    <div className="form-group mb-6">
                        <label className="form-label inline-block mb-2 text-gray-700">Email address</label>
                        <input type="email" className="form-control
        block
        w-full
        px-3
        py-1.5
        text-base
        font-normal
        text-gray-700
        bg-white bg-clip-padding
        border border-solid border-gray-300
        rounded
        transition
        ease-in-out
        m-0
        focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInputEmail2"
                            aria-describedby="emailHelp" placeholder="Enter email" 
                            
                            onChange={(e)=>{
                                setLoginEmail(e.target.value)
                            }} />
                    </div>
                    <div className="form-group mb-6">
                        <label  className="form-label inline-block mb-2 text-gray-700">Password</label>
                        <input type="password" className="form-control block
        w-full
        px-3
        py-1.5
        text-base
        font-normal
        text-gray-700
        bg-white bg-clip-padding
        border border-solid border-gray-300
        rounded
        transition
        ease-in-out
        m-0
        focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInputPassword2"
                            placeholder="Password" onChange={(e)=>{setLoginPassword(e.target.value)}}/>
                    </div>
                    <div className="flex justify-between items-center mb-6">
                        <div className="form-group form-check">
                            <input type="checkbox"
                                className="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
                                id="exampleCheck2" />
                            <label className="form-check-label inline-block text-gray-800" >Remember me</label>
                        </div>
                        <a href="#!"
                            className="text-blue-600 hover:text-blue-700 focus:text-blue-700 transition duration-200 ease-in-out">Forgot
                            password?</a>
                    </div>
                    <button  className="
      w-full
      px-6
      py-2.5
      bg-blue-600
      text-white
      font-medium
      text-xs
      leading-tight
      uppercase
      rounded
      shadow-md
      hover:bg-blue-700 hover:shadow-lg
      focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
      active:bg-blue-800 active:shadow-lg
      transition
      duration-150
      ease-in-out" onClick={LoginTry} type="button">Sign in</button>
                    <p className="text-gray-800 mt-6 text-center">Not a member? <a href="#!"
                        className="text-blue-600 hover:text-blue-700 focus:text-blue-700 transition duration-200 ease-in-out">Register</a>
                    </p>
                </form>
            </div>


        </>
    )
}

export default Login