Using useMediaQuery how can we make the screen responsive?

Question

Using useMediaQuery in react responsive, how can we make the Login component responsive for following resolutions ? Could someone please advise here ?

1920 * 1080
1536 * 864
and 1366 * 768

import React, { useState, useEffect, useCallback } from 'react';
import { useForm } from "react-hook-form";
import { useNavigate } from "react-router-dom";
import { useMediaQuery } from 'react-responsive';
const appURL = process.env.REACT_APP_URL;


const Login = () => {
    const { register, handleSubmit, formState: { errors }, reset} = useForm();
    const [loginData, setLoginData] = useState("");
    const [helperText, setHelperText] = useState('');
    const navigate = useNavigate();

    const isDesktopOrLaptop = useMediaQuery({ maxWidth: 1920 })

    const onSubmit = (data) => {
        const fetchData = async () => {
            try {
            const userEmail = "dev@test.com"; // for time being just hard code data
            const userPassword = "some_paswword";  // for time being just hard code data
            if(data.email === userEmail && data.password === userPassword ){
                localStorage.setItem('loginEmail', userEmail);
                setLoginData(userEmail);
                navigate('/admin');
                window.location.reload(true) 
            } else {
                setHelperText("Invalid login details");
            }
            } catch (e) {
                console.log(e);
                setHelperText(e.response.data.fail);
            }
        }
        fetchData();
    };
    console.log(errors);

    return (
        <div id="App">
          
          { isDesktopOrLaptop && 
            
              <section className="row">
                <div className='loginSection'>
                     <h3>Login</h3>
                    <form className='loginForm' onSubmit={handleSubmit(onSubmit)}>
                        <input
                            id="email"
                            type="email"
                            placeholder='email'
                            {...register("email", { 
                                required: true,
                                pattern: {
                                    value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
                                    message: "Please enter a valid email !"
                                }
                            })}
                        />
                        
                        <span className="emailValidationText">
                             {errors.email && errors.email.type === "required" && <span>Email is required !</span>}
                             {errors.email && <span>{errors.email.message}</span>}
                         </span>
                        
                        <input
                            id="password"
                            type="password"
                            placeholder='password'
                            {...register("password", { 
                                required: true,
                                minLength: {
                                    value: 5,
                                    message: "Minimum length of 5 letters"
                                },
                                pattern: {
                                    value: /^(?=.*?\d)(?=.*?[a-zA-Z])[a-zA-Z\d][a-zA-Z\d\#!@~$]+$/,
                                    message: "Password begin with letter, includes number & special character"
                                }
                            })}
                        />
                        
                        <span className="passwordValidationText">
                             {errors.password && errors.password.type === "required" && <span>Password is required !</span>}
                             {errors.password && <span>{errors.password.message}</span>}
                         </span>
                        
                         <label>
                            <span className="loginValidationText">{helperText}</span>
                         </label>
                        <section className="col-low">
                        <input type="submit" />
                        </section>  
                    </form>
                </div>
              </section>
            }
        </div>
    )
}

export default Login;