React Fullcalendar eventDidMount -> Replacing React-rendered children with a new root component

Question

(I'm sorry for my bad english :/)

Here I'm trying to render an input in a fullcalendar event on my React application (fullcalendar v5), but i try with a simple div for tests. So I use eventDidMount with a function that renders with ReactDOM.render. Only, I have a problem, every time I render, I get this error on the console :

Replacing React-rendered children with a new root component. If you intended to update the children of this node, you should instead have the existing children update their state and render the new components instead of calling ReactDOM.render.

And I don't understand it very well...

Here is the component in question, the function that should render the input in question is EventDetails. I create the event after the user has validated a form (in the onSubmit) :

type Props = {
    actualResource: string
}

const ResourcesCalendar = (props: Props) => {

    const calendarRef = useRef(null)

    const [selectedRange, setSelectedRange] = useState<{start: Moment, end: Moment}>()
    const [Modal, open, close, isOpen] = useModal('root');

    const { register, handleSubmit, control, errors, setValue } = useForm(); // initialize the hook


    useEffect(() => {
      console.log(props.actualResource);
    }, [props.actualResource])
    

    const handleDateClick = (selectInfo) => {
        let calendarApi = selectInfo.view.calendar
        setSelectedRange({
            start: moment(selectInfo.start),
            end: moment(selectInfo.end)
        })
        open()
        calendarApi.unselect()
    }

    const handleEventClick = (e) => {
        // open()
        // setValue("maxResources", 2)
    }

    const EventDetail = ({ event, el }) => {
        const content = <div>ok</div>;
        ReactDOM.render(content, el)
        return el;
      };
     

    const onSubmit = (data: {maxResources: number}) => {  
        close()
        calendarRef.current.getApi().addEvent({
            start: selectedRange.start.toISOString(),
            end: selectedRange.end.toISOString(),
            color: "#ff9f43",
            title:data.maxResources
        })
    }

    return(
        <div style={{margin: 20}}>
            <h2 className="text-center font-light" style={{paddingBottom: 20}}>Planning des {props.actualResource === "cells" ? "cellules" : "régleurs"}</h2>
            <FullCalendar
                allDaySlot={false}
                plugins={[timeGridPlugin, interactionPlugin]}
                initialView="timeGridWeek"
                headerToolbar={{
                    left: 'prev,next',
                    center: 'title',
                }}
                ref={calendarRef}
                locale="fr"
                slotDuration="00:10:00"
                height={900}
                selectable
                eventOverlap={false}
                selectOverlap={false}
                firstDay={1}
                eventResizableFromStart
                editable
                droppable
                nowIndicator
                select={handleDateClick}
                eventClick={(e) => {
                    handleEventClick(e)
                }}
                eventDidMount={EventDetail}
            />
            <Modal>
                <ModalContainer width={400}>
                    <form onSubmit={handleSubmit(onSubmit)}>
                        <Field
                            name="maxResources"
                            type="number"
                            label="Nombre de resources max sur ce créneaux *"
                            register={register({
                                min:{
                                    value: 0,
                                    message:'Veuillez saisir un nombre supérieur à 0'
                                },
                                required: true 
                            })}
                            error={errors.maxResources}
                        />
                        <button className="btn bg-primary light center" type="submit">Valider</button>
                    </form>
                </ModalContainer>
            </Modal>
        </div>
    )
}

export default ResourcesCalendar

If someone manages to explain to me where this warning comes from, it doesn't prevent the application from working, but it bothers me... Thanks a lot