How to fix Warning: Failed prop type: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`. 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 RadioExample() {
  const [selected, setSelected] = useState('option1');

  return (
    <div>
      <input
        type="radio"
        checked={selected === 'option1'}
        onChange={() => setSelected('option1')}
      />
      <input
        type="radio"
        checked={selected === 'option2'}
        onChange={() => setSelected('option2')}
      />
    </div>
  );
}

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

import { useRef } from 'react';

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

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(checkboxRef.current.checked);
  };

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

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

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

// WRONG - checked becomes undefined initially
function BadExample() {
  const [isChecked, setIsChecked] = useState();

  return (
    <input
      type="checkbox"
      checked={isChecked} // undefined at first, then boolean
      onChange={(e) => setIsChecked(e.target.checked)}
    />
  );
}

// CORRECT
function GoodExample() {
  const [isChecked, setIsChecked] = useState(false);

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

function ComponentWithProps({ initialChecked }) {
  const [isChecked, setIsChecked] = useState(initialChecked ?? false);

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