How to transport any component with chakra ui Portal component to dom node?

Solution for How to transport any component with chakra ui Portal component to dom node?
is Given Below:

if in my index.html file, there is a div tag with "modal-should-be-appended-here" id:

<div id="modal-should-be-appended-here"></div>

By default chakra UI’s Portal will get appended at the end of document.body

import { Portal } from "@chakra-ui/react"

<Portal>This text is portaled at the end of document.body!</Portal>

How to portal this text to <div id="modal-should-be-appended-here"></div> instead of document.body ?

Edit: I know there is a possibility to use with ref, but component should be specifically portalled to <div id="modal-should-be-appended-here"></div> that is in index.html

The easiest way to achieve this its

  1. Wrap your div in HTML to react component using React.forwardRef, like:
    ModalShouldBeAppendedHere.tsx
import React from "react";
    
export const ModalShouldBeAppendedHere = React.forwardRef((props, ref) => (<div ref={ref} id="modal-should-be-appended-here"/>));
  1. in you main component or where you want to use ModalShouldBeAppendedHere create ref which you want to share between components
const modalRef = React.createRef();
  1. use wrapper component like <ModalShouldBeAppendedHere ref={modalRef} />

  2. Use Portal with containerRef props

 <Portal containerRef={modalRef}>This text is portaled at the end of document.body!</Portal>

More about refs: https://reactjs.org/docs/forwarding-refs.html