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?

If your goal is to have the login and register on the right and the rest of the navigation on the left, you could adjust your css like this:

list-container {
  display: flex;
  justify-content: space-between;
  flex-grow: 1;
}

Please clarify your issue if another part is your problem.

Recource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/