Context : I have an App with a form where you can select a muscle, and a number of exercices to do for this selected muscle. The idea is to add any muscle you want with its number of exercices in the form.

listOfMuscles is just an Array with all existing muscles to work.

What I want to do : When I click on Add button, I want to create a new div (same as in displayMuscleInProgram() to let the user add a new muscle to his program.

The problem : With this code, I get an error saying : Argument of type 'Element' is not assignable to parameter of type 'Node'.

My questions : Why is this error popping ? Is there a way with React to create DOM element. If yes, can you give me an example ?

I write here my entire page :

import { Formik, Form, Field } from "formik";
import React from "react";
import { useNavigate } from "react-router-dom";
import { getAllMuscles, numberOfExercices } from "../helpers/dataModuler";
import { setInLocalStorage } from "../helpers/localStorageHandler";

const listOfMuscles = getAllMuscles();

export const ProgramForm: React.FC<{}> = () => {
  const listOfMuscles = getAllMuscles();
  const navigate = useNavigate();

  const initialValues = {
    numberOfExercices: 0,
    muscle: listOfMuscles[0]
  };

  const handleSubmit = (values: {}) => {
    setInLocalStorage("program", values);

    navigate("/programme");
  };

  return (
    <>
      <Formik
        initialValues={initialValues}
        onSubmit={(values) => handleSubmit(values)}
      >
        <Form>
          <div id="container">
            <DisplayMuscleInProgram />
          </div>

          <button
            onClick={addMuscleToProgram}
            type="button"
            className="rounded-md border"
          >
            Add
          </button>

          <div className="text-center">
            <button
              type="submit"
              className="mt-8 rounded-lg bg-primary p-2 text-white"
            >
              Let's gooooo