React: Change state value when select option items clicked

So In my react app, I have select menu and and two(width and height ) state variables. Here is sandbox

const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);

// select option

<div className="flex items-center space-x-2">
        <select
          id="countries"
          class="bg-gray-50 border w-96 border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block  p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
        >
         
          <option
            onClick={() => {
              setWidth(100);
              setHeight(200);
            }}
            selected
            value="header_ad"
          >
            Resolution 1
          </option>
          <option
            onClick={() => {
              setWidth(1000);
              setHeight(2000);
            }}
            selected
            value="header_ad"
          >
            Resolution 2
          </option>
        </select>
      </div>

I wanted to change the values of width and height when I clicked on the select option values.

i.e. When I click on Resolution 1 option I wanted to set the values of width and height to be 100 and 200 respectively and the same as if I clicked on Resolution 2 option.

How can I achieve this? I try to change their values with onClick event but it doesn’t work.

>Solution :

onClick on options element does exist. Please check the following code snippet.

https://codesandbox.io/s/upbeat-wind-4i89o7?file=/src/App.js

    import { useState } from "react";
    import "./styles.css";

    const data = {
      option1: {
        width: 1024,
        height: 768
      },
      option2: {
        width: 100,
        height: 78
      }
    };

    export default function App() {
      const [width, setWidth] = useState(0);
      const [height, setHeight] = useState(0);

      const handleOnChange = (value) => {
        setWidth(data[value].width);
        setHeight(data[value].height);
      };

      return (
        <div className="App">
          <h1>Hello CodeSandbox</h1>
          <h2>Start editing to see some magic happen!</h2>
          <div className="flex items-center space-x-2">
            <select
              id="countries"
              className="bg-gray-50 border w-96 border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block  p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
              onChange={(e) => handleOnChange(e.currentTarget.value)}
            >
              <option selected value="option1">
                Option 1
              </option>
              <option value="option2">Option 2</option>
            </select>
          </div>
          <br></br>
          <span>Height:{height}</span>
          <br></br>
          <span>Width:{width}</span>
        </div>
      );
    }