导致React组件受控/不受控的条件是什么？我有一个例子，它会发生变化？

import React, { useState } from 'react';

// 受控组件示例
const ControlledComponent = () => {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
};

// 不受控组件示例
const UncontrolledComponent = () => {
  const inputRef = useRef(null);

  const handleClick = () => {
    const value = inputRef.current.value;
    console.log(value);
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>获取输入值</button>
    </div>
  );
};

// 在父组件中使用这两个组件
const ParentComponent = () => {
  return (
    <div>
      <ControlledComponent />
      <UncontrolledComponent />
    </div>
  );
};