I have a form in which I do not need to track the changes in real time for part of the data and only need the final data. I want to know how to submit a controlled <select> and an uncontrolled <input> in the same form.

my code for states and handlers:

    const [ethValue, setEthValue] = useState("");
    const ethValueRef = useRef();
  
    const handleBet = (e) => {
      const newEthValue = ethValueRef.current.value;
      setEthValue(newEthValue);
      e.preventDefault();
    };

    const [formData, setFormData] = React.useState({
        userTeamChosen: "",
        eventNumber: 0,
    })
  
    function handleChange(event) {
        const { name, value, type, checked } = event.target
        setFormData(prevFormData => {
            return {
                ...prevFormData,
                [name]: type === "checkbox" ? checked : value
            }
        })
    }

my forms:

            <form onSubmit={handleBet}>
                    <select
                        onChange={handleChange}
                        name="userTeamChosen"
                        value={formData.userTeamChosen}>

                        <option>--choose---</option>
                        <option value={a}>{a}</option>
                        <option value={b}>{b}</option>
                        <option value={c}>{c}</option>
                    </select>

                    <input
                        type="number"
                        defaultValue={ethValue}
                        ref={ethValueRef}
                        name="value"
                    />
                    <button>Submit</button>
            </form>

How do I submit both forms?