I tried to show the popup message in the end of the clicked row, but it is showing popup by using unwanted height and width position i need to show it within the end of right side of the row.

i handled the data using the popup height and width and the current screen innerwidth and innerheight to show the popup within screen and not taking any more space to show the popup.

here i attached the code below:

import React, { useState } from "react";
import { IoIosCloseCircle } from "react-icons/io";
const TableComponent = () => {
  const data = [
    { id: 1, name: "John Doe", email: "[email protected]" },
    { id: 2, name: "Jane Smith", email: "[email protected]" },
    { id: 3, name: "Bob Johnson", email: "[email protected]" },
    { id: 4, name: "Alice Williams", email: "[email protected]" },
    { id: 5, name: "Charlie Brown", email: "[email protected]" },
    { id: 6, name: "David Wilson", email: "[email protected]" },
    { id: 7, name: "Eve Davis", email: "[email protected]" },
    { id: 8, name: "Frank Miller", email: "[email protected]" },
    { id: 9, name: "Grace Lee", email: "[email protected]" },
    { id: 10, name: "Henry Taylor", email: "[email protected]" },
  ];
  const [show, updateShow] = useState({
    popupShow: false,
    popupMessage: { name: null, email: null },
    position: { x: null, y: null },
  });
  const handlePopupPosition = (e, row) => {
    const rowElement = e.currentTarget;
    const rowRect = rowElement.getBoundingClientRect();
    const popupData = document.getElementById("popup-wrapper");
    const height = popupData?.clientHeight;
    const width = popupData?.clientWidth;
    
    let popupX = rowRect.right + window.scrollX;
    let popupY = rowRect.top + window.scrollY;

    popupX = Math.min(window.innerWidth, popupX) - width;
    popupY = Math.min(window.innerHeight, popupY) - height;
    updateShow({
      popupShow: true,
      popupMessage: { name: row.name, email: row.email },
      position: { x: popupX, y: popupY },
    });
  };

  return (
    <>
      <table className="table-component">
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          {data.map((row) => (
            <tr
              key={row.id}
              onClick={(e) => {
                handlePopupPosition(e, row);
              }}
            >
              <td>{row.id}</td>
              <td>{row.name}</td>
              <td>{row.email}</td>
            </tr>
          ))}
        </tbody>
      </table>
      {show.popupShow && (
        <div
          className={`popup arrow-left `}
          style={{
            left: show.position.x,
            top: show.position.y,
            position: "relative",
          }}
          id="popup-wrapper"
        >
          <div className="popup-wrapper">
            <IoIosCloseCircle
              className="text-danger pointer"
              style={{ cursor: "pointer" }}
              onClick={() => {
                updateShow({
                  popupShow: false,
                  popupMessage: { name: null, email: null },
                });
              }}
            />
            <p>
              {show.popupMessage.name}
              {show.popupMessage.email}
            </p>
          </div>
        </div>
      )}
    </>
  );
};
export default TableComponent;

I need to show the popup within the end of the clicked row.