Радиокнопка не нажимается при однократном нажатии

Index.js

const [sendVia, setSendVia] = useState('astrolger');
const changeValue = (e) => {
    e.preventDefault();
    console.log(e.target.value)
    setSendVia(e.target.value);
};

const handleSubmit = async e => {
    e.preventDefault();
};

 <div className='row mt-2'>
  <div className='col' onChange={e => changeValue(e)}>
   <p>Send By:</p>
   <input type="radio" id="astrologer" name="sendBy" value="astrolger" />  
   <label htmlFor="astrologer" className='ml-1'>Astrologer</label>
   <input type="radio" id="disciple" name="sendBy" value="disciple" className='ml-2'  />
   <label htmlFor="disciple" className='ml-1'>Disciple</label><br />
  </div>
 </div>

Значение изменяется при однократном щелчке, но параметр изменяется при двойном щелчке, не знаю, почему, когда я щелкаю по ученику, значение изменяется немедленно, но мне нужно дважды щелкнуть, чтобы показать это измененное значение. Любая помощь будет приветствоваться