How to scroll to a specific <optgroup> in a select dropdown when its opened

Question

I have a dropdown with a list of events that are displayed, by date, in descending order. The client adds these events ahead of time so the user can select the event for more details. Since these events are on Saturdays and Sundays, I have an <optgroup> label for each day where there are multiple events...typically 30-40 on a weekend.

<select name="eventName" id="event">
    <option value="none">Choose an Event</option>
    <optgroup label='Sunday January 7, 2023'></optgroup>
    <option value="1652">Event 1652</option>
    <option value="1654">Event 1654</option>
    <option value="1655">Event 1655</option>
    <optgroup label='Saturday January 6, 2023'></optgroup>
    <option value="1698">Event 1698</option>
    <option value="1645">Event 1645</option>
    <option value="1642">Event 1642</option>
    <optgroup label='Sunday December 17, 2023'></optgroup>
    <option value="1552">Event 1552</option>
    <option value="1554">Event 1554</option>
    <option value="1555">Event 1555</option>
    <optgroup label='Saturday December 15, 2023'></optgroup>
    <option value="1598">Event 1598</option>
    <option value="1545">Event 1545</option>
    <option value="1542">Event 1542</option>
</select>

Assume that there are far more options than in my example.

The problem is that there can be anywhere from 50-100 events into the future. So when the dropdown is opened the user needs to scroll down to the events happening this upcoming weekend. I would like to have the <select> open to the upcoming weekend...perhaps using an onclick? The user should still be able to scroll up or down and select any event..

How do you launch a <select> so that it scrolls to a specific <optgroup> label when its opened?