'React Dropdown prop callback resets title

Working with a Dropdown but having a problem with the props callback, which resets {titlename}. I want to highlight the selected value but because of props.callback() / props.callback(key), the component or value gets reset and the selected value is not shown in {titlename}. Without callback props, this works perfectly, so that {titlename} is updated onClick. Is there a way I can set the clicked value as the title while also sending the callback?

 const CategoriesDropdown = (props) => {
    
        const eventData = props.Data;
    
        const [dropdownOpen, setDropdownOpen] = useState(false);
        const [titleName, setTitleName] = useState(props.Title);
    
        function DropdownComponent() {
    
            function clicked(key, name) {
                if (name === titleName) {
                    //console.log("Same Clicked!");
                    props.callBack()
                } else {
                    //console.log("Different Clicked!");
                    setTitleName(name);
                    props.callBack(key)
                }
            }
    
            if (eventData)
            return (
                <Dropdown
                    isOpen={dropdownOpen}
                    toggle={() => setDropdownOpen(!dropdownOpen)}
                >
                    <DropdownToggle className="btn_white_dark_border dropdown_border" button caret>
                        <span>{titleName}</span>
                    </DropdownToggle>
                    <DropdownMenu>
                        {Object.entries(eventData).map(([key, eventData], i) => (
                            <DropdownItem
                                key={i}
                                value={eventData[key]}
                                onClick={() =>
                                    clicked(key, eventData.Name)
                                }
                            >
                            {(eventData.Name) + (eventData.Count)}
                            </DropdownItem>
                        ))}
                    </DropdownMenu>
                </Dropdown>
            );
        }
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source