Css is not doing what it intended for and I checked it again but can't find a problem

import React , {useState} from "react";
import Hamburger from "hamburger-react"

export default function Nav() {
    const [isExpended , setIsExpended] = useState(false)
    return(
            <nav className="navigation">
                <a href="/" className="brand-name">WebName</a>
                <button onClick={() => {
                    setIsExpended(!isExpended)
                }}                 
                className="hamburger"><Hamburger /></button>
                <div  className={isExpended?"navigation-menu.expended":"navigation-menu"}>
                    <ul>
                        <li><a href="/">Home</a></li>
                        <li><a href="/">About</a></li>
                        <li><a href="/">Help</a></li>
                    </ul>
                </div>
            </nav>
    )
}

Css

.navigation {
height: 60px;
width: 100%;
display: flex;
align-items: center;
position: relative;
padding: 0.5rem 0rem;
background-color: #fff;
color: black;
box-shadow: 0 2px 2px 2px rgba(9, 9, 9, 0.23);

}

.brand-name {
    text-decoration: none;
    color: black;
    font-size: 1.3rem;
    margin-left: 1rem;
}
.navigation-menu {
    margin-left: auto;
}
.navigation-menu ul {
    display: flex;
    padding: 0;
}
.navigation-menu li {
    list-style-type: none;
    margin: 0 1rem;
}
.navigation-menu li a {
    text-decoration: none;
    width: 100%;
    justify-content: stretch;

}
.hamburger{
    border: 0;
    
    border-radius: 20%;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    position: absolute;
    top: 50%;
    right: 25px;
    transform: translateY(-50%);
    display: none;
}

@media screen and (max-width:700px) {
    .navigation-menu ul{
        display:none;
    }
}
@media screen and (max-width:700px){
    .hamburger{
        display: block;
    }
}

this is the code that is not working other are working fine but when size changed Hamburger do comes but navigation-menu doesn't style and just appear there

 @media screen and (max-width:700px){
        .navigation-menu ul{
            flex-wrap: wrap;
            position: absolute;
            top: 60px;
            left: 0;
            flex-direction: column;
            width: 100%;
            height: calc(100vh - 77px);
            background-color: #fff;
            border-top: 1px solid black;
        }
        .navigation-menu li{
            text-align: center;
            margin: 0;
        }
        .navigation-menu li a{
            color: black;
            width: 100%;
            padding: 1.5rem 0;
        }
        .navigation-menu li:hover{
            background-color: #eee;
        }

i try instead of class Name I use there tag name but result was still the same i don't know where my code gone wrong everyother thing is working as intended }

@media screen and (max-width:700px){
    .navigation-menu ul{
        display: none;
    }
}
@media screen and (max-width:700px){
    .navigation-menu-expended ul{
        display: block;
    }
}