How to rotate custom select arrow on focus with only css?

I got this simple example to illustrate the problem.

import './style.css';

export default function App() {
    return (
        <div className="App">
            <div className="App">
                    <select id="mySelect">
                        <option>Option 1</option>
                        <option>Option 2</option>
                        <option>Option 3</option>
                    </select>
                    <span></span>
            </div>
        </div>
    );
}

and the styles fot that

#mySelect + span:after {
    content: '↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑';
}

#mySelect:focus + span:after {
    content: '↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓';
}

What I need is to replace “down arrow” to “up arrow” or rotate it on 180deg (doesen’t metter which it will be) when select was opened and to rotate it backwards if there was a click on the select or anywhere else. The problem that if you will open select and click on any other place one time the select will still have active state, so nothing gonna change. You have to click twice to rotate the arrow. So my question is how can I avhieve that without using any libraries or JavaScript. I have tried to do that with pseudo element’s but it’s doesn’t work for the same reason.