Screen resolution set using react responsive doesn't work

Question

Using 'react-responsive' how can I make responsive for multiple resolution, I have tried below, but not getting desired output: Could someone suggest how to use it ?

1920px 
1536px

import React from 'react';
import { useNavigate } from "react-router-dom";
import { useMediaQuery } from 'react-responsive';

const Admin = () => {
    const navigate = useNavigate();
    const isPcOrLaptop = useMediaQuery({
    query: '(max-width: 1920px)'
   });

    const handleLogout = () => {
        localStorage.removeItem('loginEmail');
        navigate("/login");
      };

    return (
        <div id="App">
        {
          isPcOrLaptop && 
            <div className='adminSection'>
                <div className='row'>
                    <h1>Hello Admin</h1>
                    <div className="logout">  
                      <img src="/images/logout.png" alt="Logout" onClick={handleLogout}> 
                      </img>
                    </div>
                </div>
            </div>
             }
        </div>
    )
}

export default Admin;

// admin.css

.adminSection{
    width: 100%;
}

 h1{
    margin: 25PX !important;
    color: black !important;
}

.logout img {
    height: 30px;
    width: 30px;
    margin: -70px 50px 0px 0px;
    float: right;
}