Uncheck input checkbox when one other is checked in next.js

I want to make navigation where I can switch on a button to scroll to that section but what can I do to uncheck 3 inputs when one is checked in next.js the following code. Do I have to make every menu item or can I leave it as it is?

I appreciate every bit of help :)

function NavMenu() {
    
    function MenuItem(props) {
        const [menuItemActive, setMenuItemActive] = useState(false);

        const MenuItemToggle = ({onChange, value}) => 
            <label className='navitem-container'>
                <input checked={value} type="checkbox" onChange={onChange} className='menuiteminput' id={props.idinput}/>
                <span className='navitem-slider' id={props.idspan}>
                    {props.children}
                </span>
            </label>
        ;

        return (
            <div>
                <MenuItemToggle value={menuItemActive} onChange={(event) => setMenuItemActive(event.currentTarget.checked)}/>
            </div>
        )
    }


    return (
        <div>
            
            <div className='left-nav'>
                <div className='left-navitem-container'>
                    <MenuItem idspan="services-span" idinput="services-input">
                        Services
                    </MenuItem>
                    <MenuItem idspan="portfolio-span" idinput="portfolio-input">
                        Portfolio
                    </MenuItem>
                    <MenuItem idspan="about-us-span" idinput="about-us-input">
                        About Us
                    </MenuItem>
                    <MenuItem idspan="contact-span" idinput="contact-input">
                        Contact
                    </MenuItem>
                </div>
            </div>
        </div>
    )
}

and here is the CSS

.left-nav {
  width: 250px;
  height: 100vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 3%;
  position: fixed;
}

.menuiteminput {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.menuiteminput:checked + #services-span:before {
  left: 72px;
  content: url(../public/svgs/blank.svg);
  transition-duration: 0.5s;
}

.menuiteminput:checked + #portfolio-span:before {
  left: 72px;
  content: url(../public/svgs/blank.svg);
  transition-duration: 0.5s;
}

.menuiteminput:checked + #about-us-span:before {
  left: 72px;
  content: url(../public/svgs/blank.svg);
  transition-duration: 0.5s;
}

.menuiteminput:checked + #contact-span:before {
  left: 72px;
  content: url(../public/svgs/blank.svg);
  transition-duration: 0.5s;
}

.menuiteminput:checked + .navitem-slider {
  padding-left: 13px;
}

.navitem-container {
  height: 30px;
  display: flex;
  align-items: center;
  margin: 30px 0;
}

.navitem-slider {
  margin: 20px 0;
  height: 30px;
  background-color: var(--accent-color);
  width: 100px;
  display: flex;
  align-items: center;
  font-size: 10pt;
  border-radius: 100px;
  position: relative;
  padding-left: 33px;
  cursor: pointer;
  transition-duration: 0.5s;
}

.navitem-slider:before {
  width: 16.5px;
  height: 16.5px;
  border-radius: 100px;
  background-color: white;
  left: 3px;
  position: absolute;
  top: 3px;
  padding: 4px;
  transition-duration: 0.5s;
}

#services-span {
  width: 100px;
}

#services-span:before {
  content: url(../public/svgs/service.svg);
  transition-duration: 0.5s;
}

#portfolio-span:before {
  content: url(../public/svgs/portfolio.svg);
  transition-duration: 0.5s;
}

#about-us-span:before {
  content: url(../public/svgs/team.svg);
  transition-duration: 0.5s;
}

#contact-span:before {
  content: url(../public/svgs/contacts.svg);
  transition-duration: 0.5s;
}

Thanks in advance :D