how to change the background color of a button without affecting the other buttons in React JS

Question

I would like to change the backgroud color from the DIV when i click without affecting to others buttons in the same line. I hope you could help me.. THank you!

For example when I click in the first DIV Developers, the backgroud color change, however it affects to the others buttons, i want to effect only in the button i click to change the background color.

import React, { useState } from 'react';
import './navbar.css';
import Logo from '../../assets/img/ubuntu.jpg'
import { Dropdown } from '../ui/dropdown/Dropdown';

export const Navbar = () => {

    const [isOpen, setIsOpen] = useState(false);
    const [style, setStyle] = useState(true);
    const [styleIcon, setStyleIcon] = useState(true);
    const [isActive, setIsActive] = useState(false);

    const handleClick = () => {
        setIsActive(current => !current);
        setIsOpen(!isOpen);
    };

    const toggling = () => {
        setIsOpen(!isOpen);
        changeStyle();
        changeStyleIcon();
    };
    const changeStyle = () => {
        setStyle(!style);
    };
    const changeStyleIcon = () => {
        setStyleIcon(!styleIcon);
    };
return (
        <>
            <div className="div_main_navbar">
                <div className="div_main_title">
                    <div className="div_main_button">
                        <img className="img_logo" src={Logo} alt="logo" />
                    </div>
                    <div  
                        style={{
                            backgroundColor: isActive ? 'salmon' : '',
                            color: isActive ? 'white' : '',
                        }}
                        onClick={handleClick}
                    >
                        <strong className="label_strong">Enterprise</strong>
                        <div className="div_icon">
                            <i className={styleIcon ? "fa-solid fa-angle-down" : "fa-solid fa-angle-up"} ></i>
                        </div>
                    </div>
                    <div
                        style={{
                            backgroundColor: isActive ? 'salmon' : '',
                            color: isActive ? 'white' : '',
                        }}
                        onClick={handleClick}
                    >
                        <strong className="label_strong">Developer</strong>
                        <div className="div_icon">
                            <i className={styleIcon ? "fa-solid fa-angle-down" : "fa-solid fa-angle-up"} ></i>
                        </div>
                    </div>
                    <div className={style ? 'div_main_button' : 'div_main_button_change_color'} onClick={toggling}>
                        <strong className="label_strong">Community</strong>
                        <div className="div_icon">
                            <i className={styleIcon ? "fa-solid fa-angle-down" : "fa-solid fa-angle-up"} ></i>
                        </div>
                    </div>
                    <div className={style ? 'div_main_button' : 'div_main_button_change_color'} onClick={toggling}>
                        <strong className="label_strong">Download</strong>
                        <div className="div_icon">
                            <i className={styleIcon ? "fa-solid fa-angle-down" : "fa-solid fa-angle-up"} ></i>
                        </div>
                    </div>
                </div>
                <div className="div_main_search_signin">
                    <div className="div_main_se_in">
                        <strong className="label_strong">Search</strong>            
                    </div>
                    <div className="div_main_se_in">
                        <strong className="label_strong">Sign in</strong>
                    </div>
                </div>
                
            </div>
            {
                isOpen && (
                    <Dropdown/>
                )
            }
        </>
    )
}x