How can I make the Material UI header containing Grid Responsive to mobile screen with breakpoints

Question

I have made the header component with grid having links for routing, I just want this grid be responsive on mobile screen by applying the material UI breakpoints. Means Instead of showing all the grid items by wrapping them under, just show the 2 items on mobile screen. thanks
**This is my code of the header.js file: **

import React from 'react'
import './Header.css'

import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
import { AppBar } from '@mui/material';
import SportsEsportsIcon from '@mui/icons-material/SportsEsports';
import StorefrontIcon from '@mui/icons-material/Storefront';
import GamepadIcon from '@mui/icons-material/Gamepad';
import ChildCareIcon from '@mui/icons-material/ChildCare';
import AcUnitIcon from '@mui/icons-material/AcUnit';
import { useNavigate } from 'react-router-dom';
import { makeStyles } from '@material-ui/core';
const useStyles = makeStyles((theme)=>({
root:{
    [theme.breakpoints.down('sm')]: {
        
      }
}
}))

export const Header = () => {
    const classes =useStyles()
    const navigate = useNavigate()
    return (
        // <div className='header'>
        <div>
            {/* <div className='plomxName'>PlomX</div> */}
            {/* <Box sx={{ flexGrow: 1 }}> */}
            <AppBar style={{ background: 'black', height: '109px' }}>

                    <Grid container justifyContent="center" spacing={2} className={classes.root}>
                        <div className='plomxName'><Button onClick={() => navigate('/')} sx={{ color: "white" }}>PlomX</Button></div>
                        <Grid item sx={{ marginTop: 3 }}><Button onClick={() => navigate('/games')} sx={{ color: "white" }}><SportsEsportsIcon sx={{ color: 'white' }} />Games</Button></Grid>
                        <Grid item sx={{ marginTop: 3 }}><Button onClick={() => navigate('/nftmarketplace')} sx={{ color: "white" }}><StorefrontIcon sx={{ color: 'white' }} />NFT Marketplace</Button></Grid>
                        <Grid item sx={{ marginTop: 3 }}><Button onClick={() => navigate('/metaverse')} sx={{ color: "white" }}><AcUnitIcon sx={{ color: 'white' }} />MetaVerse</Button></Grid>
                        <Grid item sx={{ marginTop: 3 }}><Button onClick={() => navigate('/getyourgameon')} sx={{ color: "white" }}><GamepadIcon sx={{ color: 'white' }} />Get your game on Blockchain</Button></Grid>
                        <Grid item sx={{ marginTop: 3 }}><Button onClick={() => navigate('/careers')} sx={{ color: "white" }}><ChildCareIcon sx={{ color: 'white' }} />Careers</Button></Grid>
                    </Grid>

            </AppBar>
            {/* </Box> */}
        </div>
    )
}

The Actual design , I want to make is like this one.