I am developing a react application which will use for new employee to create avatar depends on his behavior. App will have login, welcome and create avatar, hobby(user would able to select one hobby) and behavior screen. once user logged in, we will get the data and create new person object.

My problem is I couldn't add new property that avatar in newly created person object. I have given my code below.

contex.js

import React, { Component } from 'react'

const Context = React.createContext()
const reducer = (state, action) => {
    switch(action.type){
        case 'ADD_CONTACT':
        return{
            ...state,
            person: [action.payload, ...state.person]
        };

        case 'ADD_AVATAR':
        return{
            ...state,
            person: [action.payload, ...state.person.avatar]
        }

        default:
        return state;
    }
}

export class Provider extends Component{
    state = {
        person:[
            {
                id: '',
                email: '',
                password: '',
                avatar: ''
            }
        ],
        dispatch: action => {
            this.setState(state => reducer(state, action))
        }
    }
    render(){
        return(
            <Context.Provider value={this.state}>
              {this.props.children} 
            </Context.Provider>
        )
    }
}

export const Consumer =  Context.Consumer;

welcome.js

import React, { Component } from 'react'
import {Consumer} from '../Context';
import { Button, Form, FormGroup, Label, Input} from 'reactstrap';

export default class Welcome extends Component {

  onSubmit = ( dispatch, e) => {
    e.preventDefault();

    const newAvatar = {
        avatar: 'new'
    }

    dispatch({ type:'ADD_AVATAR', payload: newAvatar})

  }  

  render() {
    return (
      <Consumer>
          {value => {
             const { avatar, email, dispatch } = value; 
              return(
                <div className="container">
                    <h1>Welcome {value.person[0].email}!</h1>
                    <div className="row">
                        <div className="col-md-6">
                            <Form onSubmit={this.onSubmit.bind(this, avatar, dispatch)}>
                                <FormGroup check >
                                    <Label check>
                                    <Input type="radio" name="avatar"  value='male'/>{' '}
                                        male
                                    </Label>
                                </FormGroup>
                                <FormGroup check>
                                    <Label check>
                                    <Input type="radio" name="avatar"  value='female'/>{' '}
                                        female
                                    </Label>
                                </FormGroup>
                                <Button type="submit">Next</Button>
                            </Form>
                        </div>
                    </div>
                </div>
              )
          }}
      </Consumer>
    )
  }
}

Any help appreciated. Thank you!