React，如何更改下拉菜单选项？JQuery？

import React, { useState } from 'react';

function DropdownMenu() {
  const [selectedOption, setSelectedOption] = useState('Option 1');
  const options = ['Option 1', 'Option 2', 'Option 3'];

  const handleOptionChange = (event) => {
    setSelectedOption(event.target.value);
  };

  return (
    <select value={selectedOption} onChange={handleOptionChange}>
      {options.map((option) => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </select>
  );
}

export default DropdownMenu;

import React, { useEffect } from 'react';

function DropdownMenu() {
  useEffect(() => {
    const $ = window.$; // 引入JQuery库

    // 使用JQuery选择器获取下拉菜单，并更改选项
    $('#dropdown-menu').val('Option 2');
  }, []);

  return (
    <select id="dropdown-menu">
      <option value="Option 1">Option 1</option>
      <option value="Option 2">Option 2</option>
      <option value="Option 3">Option 3</option>
    </select>
  );
}

export default DropdownMenu;