Модальное окно после перетягивания становиться неактивным. Теряются обработчики

Я сделал маленькое окно-форму, которое можно переносить по экрану. Но после того как оно меняет позицию, кнопки формы перестают отвечать на нажатия. Мне кажется, что после того как я "пере-добавляю" это окно к родительскому элементу, для того чтобы применить ему новые координаты, то обработчики формы теряются. как можно привязать обработчики обратно? Спасибо за совет.

Вот само модальное окно:

import React, { useState } from 'react'



export const PopUpforTime = () => {
    // DRAGABBLE POPUP
    const [error, setError] = useState()
    const formFandler = (e) => {
        e.preventDefault();
        if (e.target[1].value !== '') {
            console.log(e.target[0].value)
            console.log(e.target[1].value)
        } else {
            setError("no empty event!")
            console.log(error)
        }
    }
    const formReset = () => setError(prev => null)
    const dragModal = (e) => {
        const element = e.target.offsetParent
        element.onmousedown = function (event) {
            let shiftX = event.clientX - element.offsetLeft;
            let shiftY = event.clientY - element.offsetTop;
            e.target.offsetParent.offsetParent.appendChild(element);
            moveAt(event.pageX, event.pageY);
            // taking initial shifts into account
            function moveAt(pageX, pageY) {
                element.style.left = pageX - shiftX + 'px';
                element.style.top = pageY - shiftY + 'px';
            }
            function onMouseMove(event) {
                moveAt(event.pageX, event.pageY);
            }
            document.addEventListener('mousemove', onMouseMove);
            element.onmouseup = function () {
                document.removeEventListener('mousemove', onMouseMove);
                element.onmouseup = null;
            };
        };
        element.ondragstart = function () {
            return false;
        };
    }

    return (
        <div className="calendar__popup" id="card_id" >
            <div className="calendar__popup_drag" onMouseDown={dragModal} />
            <form
                onSubmit={(e) => formFandler(e)} className="calendar__popup_form"
                onReset={(e) => formReset(e)}
            >
                <div style={{ userSelect: "none" }} >Please set the event time and description for it</div>
                {error && <span className="error-span">{error}</span>}
                <div className="calendar__popup_inputs">
                    <input className="calendar__popup_inputs__input" name="eventTime" type="time" placeholder="event time" />
                    <textarea className="calendar__popup_inputs__input" name="eventText" type="text" placeholder="event text" />
                </div>
                <div className="calendar__popup_buttons">
                    <button className="calendar__popup_buttons__button" type="submit">Submit</button>
                    <button className="calendar__popup_buttons__button" type="reset">Reset</button>
                    <button className="calendar__popup_buttons__button" type="reset">Close</button>
                </div>
            </form>
        </div>
    )
}

А вот его родитель:

import React, { useEffect, useReducer, memo } from 'react'
import { CALENDAR_ACTIONS, calendarReducer } from './calendarReducer';
import { Loader } from '../Loader';
import { CalendarTOdoList } from './CalendarTOdoList';
import { CalendarView } from './CalendarView';
import { API } from './../../API';
import { PopUpforTime } from './PopupForTime';
import "./calendar.scss"

const MonthButton = ({ name }) => <button className="calendar__buttonList_item">{name}</button>

const CalendarBox = () => {
    const [state, dispatch] = useReducer(calendarReducer)

    const getTodos = () => {
        API.getToDos().then(response => dispatch({ type: CALENDAR_ACTIONS.SET_TODO_ITEM, payload: response.data }))
    }
    const addTodos = () => {
        let date = "10.12.2020"
        let time = "10:00"
        let event = "do something"
        API.setToDos(time, date, event).then(response => dispatch({ type: CALENDAR_ACTIONS.SET_TODO_ITEM, payload: response.data }))
    }
    const deleteTodos = (id) => {
        //console.log("deleted")
        API.deleteToDos(id).then(response => dispatch({ type: CALENDAR_ACTIONS.DELETE_TODO_ITEM, payload: id }))
    }
    useEffect(() => {
        getTodos()
    }, [])
    useEffect(() => {//TIME
        const intervalId = setInterval(() => {  //assign interval to a variable to clear it
            dispatch({ type: CALENDAR_ACTIONS.SET_TIME })
            dispatch({ type: CALENDAR_ACTIONS.SET_DATE })
        }, 1000)
        return () => clearInterval(intervalId); //This is important
    }, []);


    return (
        <div className="calendar">
            <h1 className="calendar__title">Month List</h1>
            <div className="calendar__title_time-now">
                <span>{`Time now: ${state ? state.currentTime : "..."} Date now: ${state ? state.currentDate : "..."}`}</span>
            </div>
            <button className="calendar__title_add-todo" onClick={addTodos}>Add nev event</button>
            <div className="calendar__buttonList">
                {
                    state
                        ? state.monthArray.map(item => <MonthButton name={item} key={item} />)
                        : <Loader />
                }
            </div>
            <div className="calendar__sections">
                <div className="calendar__sections_todo">
                    {state
                        ? <CalendarTOdoList items={state.toDoItem} toDelete={deleteTodos} />
                        : <Loader />
                    }
                    <PopUpforTime />
                </div>
                <div className="calendar__sections_view">
                    <CalendarView />
                </div>
            </div>
            
        </div>
    )
}




export default memo(CalendarBox)