Nested Flexbox for navbar

I've been working on making a dropdown navbar using react, to resemble the image below -

My code -

NavBar.jsx

import React, { useState } from 'react'import './NavBar.css'const NavBar = () => {    const [openDropDown,setOpenDropDown] = useState(null)    const toggleDropDown = (menu) =>{        setOpenDropDown(openDropDown === menu ? null : menu)    }  return (<><nav className = 'navbar'><img className = 'logo' src = '../../images/logo.svg'/><div className='list-container'><ul className  = 'left-list'><li className = 'navbar-items' onMouseEnter={() => toggleDropDown('features')} onMouseLeave={() => toggleDropDown()}>                Features                {openDropDown === 'features'&& <ul className='dropdown-list'><li className='features-items'>Todo List</li><li className='features-items'>Calender</li><li className='features-items'>Reminders</li><li className='features-items'>Planning</li></ul>}</li><li className = 'navbar-items' onMouseEnter={() => toggleDropDown('company')} onMouseLeave={() => toggleDropDown()}>                Company                {openDropDown === 'company'&&<ul className='dropdown-list'><li className='company-items'>History</li><li className='company-items'>Our Team</li><li className='company-items'>Blog</li></ul>} </li><li className = 'navbar-items'>Careers</li><li className = 'navbar-items'>About</li></ul><ul className = 'right-list'><li className = 'navbar-items'>Login</li><li className = 'navbar-items'>Register</li></ul> </div></nav></>  )}export default NavBar

NavBar.css

*{    box-sizing: border-box;    margin: 0;    padding : 0;}.navbar{    display : flex;    align-items: center;    gap: 30px;}.list-container{    display: flex;    justify-content: space-around;}.left-list{    display: flex;}.right-list{    display: flex;}.navbar-items{    margin : 20px;}.logo{    margin-left: 50px;    height: 20px;    width: 50px;}

I have a navbar class with an image(the logo) and a div(containing the two lists) inside it. I have applied flex to .navbar, which seems to be working as intended.I tried to apply flex to .list-container along with justify-content: space around, but the children elements stay in the same place.What should I change in the code to make it resemble the image above?