在select外部单击时，react- when query-builder空select

import React, { useState, useRef, useEffect } from 'react';

const MyComponent = () => {
  const selectRef = useRef(null);
  const [selectedValue, setSelectedValue] = useState('');

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (selectRef.current && !selectRef.current.contains(event.target)) {
        setSelectedValue('');
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);

  return (
    <div>
      <select ref={selectRef} value={selectedValue} onChange={(e) => setSelectedValue(e.target.value)}>
        {/* select options */}
      </select>
    </div>
  );
};

export default MyComponent;