Cannot render third react component using conditional rendering – Reactjs

import React, { useState } from 'react'


const LoginPage = () => {

    const [isLogin, setIsLogin] = useState(true);
    const [isSignUp, setIsSignUp] = useState(true);
    const [isAdmin, setIsAdmin] = useState(true);

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

    // const [registerEmail, setRegisterEmail] = useState("");
    // const [registerPassword, setRegisterPassword] = useState("");
    // const [registerName, setRegisterName] = useState("");

    
    const LoginForm = () => {
        return (
            <div className="bg-white rounded-2xl shadow-2xl flex flex-col w-full md:w-1/3 items-center max-w-4xl transition duration-1000 ease-out">
                <h2 className='p-3 text-3xl font-bold text-pink-400'>Jupiter Review Hub</h2>
                <div className="inline-block border-[1px] justify-center w-20 border-blue-400 border-solid"></div>
                <h3 className='text-xl font-semibold text-blue-400 pt-2'>Log in</h3>

                {/* Inputs */}
                <div className='flex flex-col items-center justify-center'>
                    <input type='email' className='rounded-2xl px-2 py-1 w-4/5  text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Email'></input>
                    <input type="password" className='rounded-2xl px-2 py-1 w-4/5  text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Password'></input>
                    <button className='rounded-2xl m-2 text-white bg-blue-400 w-2/5 px-4 py-2 shadow-md hover:text-blue-400 hover:bg-white transition duration-200 ease-in'>
                        Log in
                    </button>
                </div>
                <div className="inline-block border-[1px] justify-center w-20 border-blue-400 border-solid"></div>
                <p className='text-blue-400 mt-4 text-sm'>Don't have an account?</p>
                <p className='text-blue-400 mb-4 text-sm font-medium cursor-pointer' onClick={() => setIsLogin(false) && setIsSignUp(true)}>Register here</p>
                <p className='text-blue-400 mt-4 text-sm'>OR</p>
                <p className='text-blue-400 mb-4 text-sm font-medium cursor-pointer' onClick={() => setIsLogin(false) && setIsAdmin(true) && setIsSignUp(false) }>Login as an Admin</p>

            </div>
        )
    }

    const SignUpForm = () => {
        return (
            <div className="bg-blue-400 text-white rounded-2xl shadow-2xl  flex flex-col w-full  md:w-1/3 items-center max-w-4xl transition duration-1000 ease-in">
                <h2 className='p-3 text-3xl font-bold text-white'>Jupiter Review Hub</h2>
                <div className="inline-block border-[1px] justify-center w-20 border-white border-solid"></div>
                <h3 className='text-xl font-semibold text-white pt-2'>Create account</h3>

                {/* Inputs */}
                <div className='flex flex-col items-center justify-center mt-2'>
                    <input type="text" className='rounded-2xl px-2 py-1 w-4/5   text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Name'></input>
                    <input type='email' className='rounded-2xl px-2 py-1 w-4/5  text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Email'></input>
                    <input type="password" className='rounded-2xl px-2 py-1 w-4/5  text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Password'></input>
                    <button className='rounded-2xl m-4 text-blue-400 bg-white w-3/5 px-4 py-2 shadow-md hover:text-white hover:bg-blue-400 transition duration-200 ease-in'>
                        Register
                    </button>
                </div>
                <div className="inline-block border-[1px] justify-center w-20 border-white border-solid"></div>
                <p className='text-white mt-4 text-sm'>Already have an account?</p>
                <p className='text-white mb-4 text-sm font-medium cursor-pointer' onClick={() => setIsLogin(true)}>Click here to Log in</p>
            </div>
        )
    }
    const AdminLoginForm = () => {
        return (
            <div className="bg-white rounded-2xl shadow-2xl flex flex-col w-full md:w-1/3 items-center max-w-4xl transition duration-1000 ease-out">
                <h2 className='p-3 text-3xl font-bold text-pink-400'>Jupiter Review Hub</h2>
                <div className="inline-block border-[1px] justify-center w-20 border-blue-400 border-solid"></div>
                <h3 className='text-xl font-semibold text-blue-400 pt-2'>Admin Log in</h3>

                {/* Inputs */}
                <div className='flex flex-col items-center justify-center'>
                    <input type='email' className='rounded-2xl px-2 py-1 w-4/5  text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Email'></input>
                    <input type="password" className='rounded-2xl px-2 py-1 w-4/5  text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Password'></input>
                    <button className='rounded-2xl m-2 text-white bg-blue-400 w-2/5 px-4 py-2 shadow-md hover:text-blue-400 hover:bg-white transition duration-200 ease-in'>
                        Log in
                    </button>
                </div>
                <div className="inline-block border-[1px] justify-center w-20 border-blue-400 border-solid"></div>
                <p className='text-blue-400 mt-4 text-sm'>Don't have an account?</p>
                <p className='text-blue-400 mb-4 text-sm font-medium cursor-pointer' onClick={() => setIsAdmin(false) && setIsLogin(false)  && setIsSignUp(true)}>Register here</p>
            </div>
        )
    }

    return (
        <div className="bg-gray-100 flex flex-col items-center justify-center min-h-screen md:py-2">
            <main className="flex items-center w-full px-2 md:px-20">
                <div className="hidden md:inline-flex flex-col flex-1 space-y-1">
                    <p className='text-6xl text-blue-500 font-bold'>Jupiter Review Hub</p>
                    <p className='font-medium text-lg leading-1 text-pink-400'>Your voice matters - Rate your Jupiter hostel stay with | Jupiter Review Hub |</p>
                </div>

                {/* {isLogin && <LoginForm />}
                {isAdmin && <AdminLoginForm />}
                {isSignUp && <SignUpForm />} */}
                {
                    isLogin ? (
                        <LoginForm />
                    ) : (
                        isSignUp ? (
                            <SignUpForm />
                        ) : (
                            isAdmin ? (
                                <AdminLoginForm />
                            ) : null
                        )
                    )
                }


            </main>
        </div>
    )
}

export default LoginPage

In this code when i try to "Login as admin" it going to Signup page…and no errors showing on, can anyone please help me with this, coz im stuck with this issue for two days.