Radio button with form in Function Component (React) =>get Warning from the Console-CodePudding

I try to collect data from inputs and pass it down to next pages, after adding radio button in the form, the code works fine, however, the Browser Console on Chrome gives me warnings like following:

Warning: 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`.

What does that mean? And how to solve it?

(I'm new to the React. Appreciate for your time)

the following is the code:

import {useLocation} from 'react-router-dom';
import { useState } from "react";
import { useNavigate } from "react-router-dom";


const Second = () => {
    const navigate = useNavigate();
    const location = useLocation();
    
    const contact=location.state;

    const [name, setName] = useState("");
    const [wording, setWording] = useState("");


    const handleSecSubmit = (e) => {
        e.preventDefault();
        const contacttotal={
            ...contact, 
            ...{name},  
            ...{wording}
        };
        console.log(contacttotal);
        navigate("/final", { state: { contacttotal } });
    }


    return ( 
        <div className="Second">
            <h1>This is Second Input Page</h1>
            <form autoComplete="on" onSubmit={handleSecSubmit}>

                <dd>Name</dd>
                <input
                    type="text" 
                    value={name} 
                    onChange={(e) => 
                        setName(e.target.value)
                    }
                    required
                ></input>
                
                
                <dd>Wording</dd>
                <div>
                     <div onChange={(e) => setWording(e.target.value)}>
                         <label><input
                                type="radio"
                                value='United States'
                                name="wording"
                                checked={wording === "United States"}
                         />United States</label>
                         <label><input
                                 type="radio"
                                 value='British'
                                 name="wording"
                                 checked={wording === "British"}
                          />British</label>
                      </div>
                </div>
                <br/>
                <button>submit</button>
            </form>
        </div>
     );
}
 
export default Second;

CodePudding user response：

Simply add onChange event to every input.

<input
   type="radio"
   value='United States'
   name="wording"
   checked={wording === "United States"}
   onChange={(e) => setWording(e.target.value)}
/>

And remove it from the div. It's not the best idea to use onChange event on other elements than input, textarea or select.