Why does the dropdown list close after I click on the dropdown child element, how can I fix this?

Question

JavaScript

There is a drop-down list, I open the list with a click, and then I want to select several combo boxes that have fallen out, but after I click on one combo box, the drop-down list immediately closes, how to make it close only when it is clicked on and / or it was possible to select several combo boxes ?
Dropdown code:

//раскрывающийся список с помощью функции
    const Dropdown = ({ text, children }) => {
        const [isOpen, setIsOpen] = useState(false);
        const toggleOpen = () => setIsOpen(isOpen => !isOpen);
        if (isOpen) {
            return (
                <div>
                    <button className="dropdown-btn-close" onClick={toggleOpen} >
                        {text}
                        <span className="fa-caret-down">▼</span>
                    </button>
                    {isOpen && <div>{children}</div>}
                </div>
            );
        }
        else {
            return (
                <div>
                    <button className="dropdown-btn-active" onClick={toggleOpen} >
                        {text}
                        <span className="fa-caret-down">▼</span>
                    </button>
                    {isOpen && <div>{children}</div>}
                </div>
            );
        }
    }

open and closed respectively

Answer 1

https://codesandbox.io/s/qna-q-1137116-i809oq?file...