React-Redux How can I display the checkbox values?

I am trying to display the checkbox values but it is not showing anything on screen. Whatever values are selected from the checkbox are returning true in the console. How can I display the values that are selected. I am using redux forms. Even I want the values to be displayed in a comma seperated way. How can I achieve this? Thanks in advance.

Here's the code :

AddUser.js

import React, { Component } from 'react'
import { Field, reduxForm } from 'redux-form'
import { connect } from 'react-redux'
import { addUser } from '../../actions'
import './AddUser.css'

class AddUser extends Component {
    renderInput(formProps) {
        return (
            <div>
                <label>{formProps.label}</label>
                <input {...formProps.input} type={formProps.type} max={formProps.max} autoComplete='off'
                 label={formProps.label} id={formProps.id}/>
                {formProps.meta.touched &&
                (formProps.meta.error && <span>{formProps.meta.error}</span>) }
            </div>
        )
    }

    onSubmit = (formValues) => {
        console.log('formValues', formValues)
        this.props.addUser(formValues)
    }


    render() {
        const { handleSubmit } = this.props
        const current = new Date().toISOString().split("T")[0]
        return (
            <div className='container wrapper'>
            <form onSubmit={handleSubmit(this.onSubmit)}
            className='form'>
                <div>
                    <label>FullName</label>
                    <Field name='fullname' component={this.renderInput}
                         type='text' />
                </div>
                <div>
                    <label>Address</label>
                    <Field name='address' component={this.renderInput}
                 type='text' />
                 </div>
                 <div>
                                    <label>BirthDate</label>
                    <Field name='birthdate' component={this.renderInput}
                         type='date'
                        max={current} />
                </div>
                <div>
                    <label>Select Your Gender</label>
                        <Field name='gender' component={this.renderInput} type='radio' value='male'
                           label='Male' />{' '}
                        <Field name='gender' component={this.renderInput} type='radio' value='female'
                             label='Female'/>{' '}
                        <Field name='gender' component={this.renderInput} type='radio' value='other'
                            label='Other' />{' '}
                    </div>
                <div>
                    <label >Select Your Hobbies</label>
                    <Field name='travelling' component={this.renderInput} type='checkbox' value='travelling' 
                    label='Travelling' />
                    <Field name='reading' component={this.renderInput} type='checkbox' value='reading' 
                    label='Reading' />
                    <Field name='gaming' component={this.renderInput} type='checkbox' value='gaming' 
                    label='Gaming' />
                    <Field name='doodling' component={this.renderInput} type='checkbox' value='doodling' 
                    label='Doodling' />
                </div>
                <button type='submit'>Submit</button>
            </form>
            </div>
        )
    }
}

const validate = (formValues) => {
    const errors = {}
    if (!formValues.fullname) {
        errors.fullname = 'You must enter a fullname'
    }
    if (!formValues.address) {
        errors.address = 'You must enter the address'
    }
    if(!formValues.birthdate){
        errors.birthdate='Please select your date of birth'
    }
    if(!formValues.gender){
        errors.gender='Please select your gender'
    }
    return errors
}

export default connect(null, {
    addUser: addUser
})(reduxForm({
    form: 'adduser',
    validate: validate
})(AddUser))

UsersList.js

import React, { Component } from 'react'
import {connect} from 'react-redux'
import {listAllUsers} from '../../actions'

class ListUsers extends Component {
    componentDidMount(){
        this.props.listAllUsers()
    }
    usersList(){
        return this.props.users.map((user)=>{
            return (
                <div key={user.id}>
                    <div>{user.fullname}</div>
                    <div>{user.address}</div>
                    <div>{user.birthdate}</div>
                    <div>{user.gender}</div>
                    <div>{user.hobbies}</div>
                    <div>
                        <button>Edit</button>
                    </div>
                    <div>
                        <button>Delete</button>
                    </div>
                </div>
            )
        })
    }
    render() {
        return (
            <div>
                <h1>Users List</h1>
                {this.usersList()}
            </div>
        )
    }
}

const mapStateToProps=(state)=>{
    console.log(state)
    return {users:state.users}
}

export default connect(mapStateToProps,{listAllUsers:listAllUsers})(ListUsers)