I’m new to reactJS. I have a select/option menu that is supposed to change the page by selecting each option. Here is the code:

<div className="flex justify-center">
                    <select className="form-select form-select-sm
                    my-3 py-2 pl-15 pr-2 text-sm text-text-secondary shadow-sm rounded-md w-full
                    focus:ring-2 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none " aria-label=".form-select-sm example">
                    <option selected value="1" onClick={() => navigate("https://stackoverflow.com/")}>users</option>
                    <option value="2" onClick={() => navigate('/ext')}>other users</option>
                    </select>
                </div>

The problem is that this part of my code works fine in Firefox, but not on Chrome or Edge. In Firefox, when, for example, I select first option, I go to the main page and when I select 2nd option I redirect to /ext path. However, when I select each of these items in Chrome, I’m still in the same page. What’s wrong?