React: How to Create a functionality that selects a language name and moves it to the top of dropdown menu list

I am trying to create a language selector/dropdown menu, that when I click a language for example english or Spanish, the language name moves to the top of the dropdown menu.

How can I create this functionality with react? maybe an if statement or select?

Language Selector:

import { Trans } from "@lingui/macro";

const ENGLISH = "en";
const SPANISH = "es";

const Selector = () => {
    const { i18n } = useLingui();
    return (
        <div className="dropDown">
            <div
                className="languageButtons"
                onClick={() => dynamicActivate(SPANISH)}
                disabled={i18n.locale === SPANISH}
            >
            </div>
            <div
                className="languageButtons"
                onClick={() => dynamicActivate(ENGLISH)}
                disabled={i18n.locale === ENGLISH}
            >
            </div>
        </div>
    );
};

Title component of dropdown menu:

 const LanguageOptionTitle = (props) => {
    const [open, setOpen] = useState(false);
    return (
        <div className="langItem" onClick={() => setOpen(!open)}>
            <i className="fa fa-caret-down"></i>
            {props.languageTitle}
            &nbsp;&nbsp;<i className="fa fa-globe" aria-hidden="true"></i>
            {open && props.children}
        </div>
    );
};