如何在querySelector中使用react状态

import React, { useState } from 'react';

function MyComponent() {
  const [value, setValue] = useState('');

  // 其他组件代码

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
    </div>
  );
}

export default MyComponent;

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

function MyComponent() {
  const [value, setValue] = useState('');
  const inputRef = useRef(null);

  useEffect(() => {
    const element = inputRef.current;
    const button = document.querySelector('button');

    button.addEventListener('click', () => {
      setValue(element.value);
    });
  }, []);

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button>Update Value</button>
    </div>
  );
}

export default MyComponent;