помогите с формой в React пожалуйста

при нажатии кнопки выходит ошибка Form submission canceled because the form is not connected выходит она при запуске в методе _addTaskButton диспатча addDay. Подскажите в чем проблема

import React from 'react';
import {connect} from 'react-redux'
import {addDay} from '../../redux/actions/actions'
class ModalTask extends React.Component{
  state = {
    name: '',
    date: '',
    startAt: ''
    }
  stopReload(e){
    e.preventDefault()
  }
  toggleModal(){
    const form = document.getElementById('addTask')
    form.classList.toggle('addTask_active')
    const body = document.querySelector('body')
    body.classList.toggle('add-task_stop-scroll')
  } 

    render(){
        return(
            <div className="add-task__wrapper">
            <div className="addTask" id="addTask">
              <div className="add-task__content">
                <div className="add-task__h3">
                  <h3>Добавить задание</h3>
                  </div>
                        <form action=''onSubmit={this.stopReload} className="add-task__form">
                          <div className="add-task__inputs_div">
                            <input id="add-task__name" type="text" name="name" onChange={this._handleInputChange} placeholder="Введите название задачи"/>
                            <input id="add-task__date" type="text" name="date" onChange={this._handleInputChange} placeholder="Введите дату" placeholder={this.props.today}/>
                            <input id="add-task__start-at" type="text" name="startAt" onChange={this._handleInputChange} placeholder="Время начала"/></div>
                          <div className="add-task__buttons_div">
                            <button id="add-task__button" type="success" onClick={() =>{
                                this._addTaskButton()
                              }
                            } >Добавить задание</button>
                          <button type="button" onClick={()=>{this.toggleModal()}}>Закрыть</button>
                          </div>
                        </form>
                </div>
            </div>
          </div>
        )
    }
    _handleInputChange = (event) => {
        const { name, value} = event.target
        this.setState({[name]: value})
      }
    
      _addTaskButton = () => {
        const task = {
        ...this.state
        }
        this.props.addDay(task)// Вот на этой строке выходит ошибка 
        this.toggleModal()
        console.log(task)
      }
}
function mapDispatchToProps(dispatch){
    return{
        addDay: task => dispatch(addDay(task))
    }
}
export default connect(null, mapDispatchToProps)(ModalTask)

файл action.js

 import {ADDDAY, ADDTASK} from './actionsTypes'
export function addDay(task){
    return{
        type: ADDDAY,
        payload: task
    }
}

export function addTask(task){
    return{
        type: ADDTASK,
        payload: task
    }
}

сам редюсер

const initialState = {
    days: ['20.20.2020', '19.22.2992']
}

export default function( state = initialState, action){
    switch(action.type){

        case 'addDay':{
            return{
                days: [...state.days, action.payload]
            }
        }
        default:{
            return state
        }
    }
}