How to fix Warning: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. in React

import { useState } from 'react';

function MyComponent() {
  const [isChecked, setIsChecked] = useState(false);

  return (
    <input
      type="checkbox"
      checked={isChecked}
      onChange={(e) => setIsChecked(e.target.checked)}
    />
  );
}

function MyComponent() {
  return (
    <input
      type="checkbox"
      defaultChecked={false}
    />
  );
}

function MyComponent({ isEnabled }) {
  return (
    <input
      type="checkbox"
      checked={isEnabled}
      readOnly
    />
  );
}

function MultiCheckbox() {
  const [checkedItems, setCheckedItems] = useState({
    option1: false,
    option2: true,
    option3: false
  });

  const handleChange = (key) => {
    setCheckedItems(prev => ({
      ...prev,
      [key]: !prev[key]
    }));
  };

  return (
    <div>
      <input
        type="checkbox"
        checked={checkedItems.option1}
        onChange={() => handleChange('option1')}
      />
      <input
        type="checkbox"
        checked={checkedItems.option2}
        onChange={() => handleChange('option2')}
      />
      <input
        type="checkbox"
        checked={checkedItems.option3}
        onChange={() => handleChange('option3')}
      />
    </div>
  );
}

function ToggleSwitch({ isOn, onToggle }) {
  return (
    <input
      type="checkbox"
      checked={isOn}
      onClick={onToggle}
      readOnly
    />
  );
}

import { useRef } from 'react';

function FormWithCheckbox() {
  const checkboxRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    const isChecked = checkboxRef.current.checked;
    console.log('Checkbox value:', isChecked);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="checkbox"
        ref={checkboxRef}
        defaultChecked={false}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

<input type="checkbox" checked={value} defaultChecked={false} />

const [value, setValue] = useState(true);
// Later setting value to undefined/null makes it uncontrolled

// Controlled
<input type="checkbox" checked={value} onChange={handleChange} />

// Or uncontrolled
<input type="checkbox" defaultChecked={false} />