I have a handler for a button to create a new “courseSession”. The handler displays a sweetAlert2 popup box.
I am trying to integrate the react component “DayPicker” from ‘react-day-picker’ dependency into the popup html container. I tried to apply this logic inside the didOpen attribute but it doesn’t work. According to the documentation, the DOM elements are already created, so i suppose that “createPortal” should work.

Here is my handler :

const handleCreateCourseSession = ()=>{
  Swal.fire({
    title : "Create a new course Session" , 
    
     html : `
    <input type = "text" placeholder="Enter course session title" id="CourseSessionTitle" class="swal2-input" />
    <div class="d-flex" id="DatePickerContainer"></div>
    `, 
    showCancelButton : true , 
    showLoaderOnConfirm : true , 
    confirmButtonText : "save",
    didOpen : ()=>{
      const divElement = document.querySelector("#DatePickerContainer"); 
      createPortal(<DayPicker  mode="range"  selected={range}  onSelect={setRange} style={{display :'inline-block'}}  />, divElement) ; 
    },
    preConfirm : ()=>{
      const courseId = selectedCourse ; 
      const courseSessionTitle = document.querySelector("#CourseSessionTitle").value ; 
      const beginDate = (range?.from ? format(range.from, 'P') : null) ; 
      const endDate = (range?.to ? format(range.to, 'P') : null); 
      createCourseSession(courseId,courseSessionTitle,beginDate,endDate).then(async (result)=>{
        await fetchTeacherCourses() ; 
      }
    ).catch(error =>{
      Swal.showValidationMessage("Oops.. request failed, please try again");
    })
    
  }
})
}

I am using a “range” state as follows const [range ,setRange] = useState({from : null , to : null});

I tried other alternatives to the code like using :

createPortal(<DayPicker mode="range" selected={range} onSelect={setRange} style={{display :'inline-block'}} />, Swal.getHtmlContainer()) // as well as Swal.getFooter() ;

and i tried creating the portal outside of the Swal function as well, but always inside the handler :

const handleCreateCourseSession = ()=>{
  Swal.fire({
    title : "Create a new course Session" , 
    
     html : `
    <input type = "text" placeholder="Enter course session title" id="CourseSessionTitle" class="swal2-input" />
    `,  
    showCancelButton : true , 
    showLoaderOnConfirm : true , 
    confirmButtonText : "save",
    didOpen : ()=>{
      //const divElement = document.querySelector("#DatePickerContainer"); 
    },
    preConfirm : ()=>{
      const courseId = selectedCourse ; 
      const courseSessionTitle = document.querySelector("#CourseSessionTitle").value ; 
      const beginDate = (range?.from ? format(range.from, 'P') : null) ; 
      const endDate = (range?.to ? format(range.to, 'P') : null); 
      createCourseSession(courseId,courseSessionTitle,beginDate,endDate).then(async (result)=>{
        await fetchTeacherCourses() ; 
      }
    ).catch(error =>{
      Swal.showValidationMessage("Oops.. request failed, please try again");
    })
    
  }
})
createPortal(<DayPicker  mode="range"  selected={range}  onSelect={setRange} style={{display :'inline-block'}}  />, Swal.getHtmlContainer()) ; 
}

From what i understood, the createPortal function should place the react component inside the containers (either the Swal html container or the div element). But i am not sure where is the issue here.