React: radio buttons require double click

radio buttons are requiring double click to get selected but they work even after clicking once

event.js

import EventList from '../components/EventList'
import React, { Component } from 'react'
import Radio from '../components/Radio';
export class Event extends Component {

constructor(props) {
    super(props);
    this.state = {
        eventType:'ALLEVENTS',
    };
    this.handelChange = this.handelChange.bind(this)
}

    DUMMY_EVENTS = [
        {
                id:'e1',
                image:'https://images.unsplash.com/photo-1501281668745-f7f57925c3b4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80',
                name:'diwali event',
                verified:true,
                joinCount:50,
                creatorId:'u1',
                creatorName:'Bikaraj',
                description:'this event is organized by bikaraj to celebrate holi'
        },
        {
                id:'e2',
                image:'https://images.unsplash.com/photo-1501281668745-f7f57925c3b4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80',
                name:'holi event',
                verified:false,
                joinCount:40,
                creatorId:'u2',
                creatorName:'Akash',    
                description:'this event is organized by Akash to celebrate holi'
        },
    ];

    handelChange = (e)=>{
        e.preventDefault();
        this.setState({eventType:e.target.value})
    }
    
    render() {
        
    const currentEventType = this.state.eventType;
    const filteredEvents=''

    if(currentEventType === 'VERIFIED'){
        this.filteredEvents = this.DUMMY_EVENTS.filter(event =>event.verified === true);
    }
    else if(currentEventType === 'UNVERIFIED'){
        this.filteredEvents = this.DUMMY_EVENTS.filter(event =>event.verified === false);
    }
    else{
        this.filteredEvents = this.DUMMY_EVENTS;
    }

    return (
        <React.Fragment>
            <Radio handelChange={this.handelChange}/>
            <div>
            <EventList events={this.filteredEvents} />
            </div>
        </React.Fragment>
        )
    }
}

export default Event

Radio.js

import React from 'react'

const Radio = (props)=> {
    return (
        <div onChange={props.handelChange}>
            <input type="radio" id="other" value="ALLEVENTS"  name="eventType" defaultChecked/> All events
            <input type="radio" id="other" value="VERIFIED"   name="eventType"/> verified
            <input type="radio" id="other" value="UNVERIFIED" name="eventType"/> unverified
        </div>
    )
}

export default Radio

working after removing
e.preventDefault();