Reactjs – The data does not appear in the interface even though it is visible on the console

I have a pop-up, when I press the button the pop-up opens,

Within pop-up I have two tables right next to each other,

The first table contains data, and each row in the right table contains three columns, and the last column is the Move button.

When you press the Move button, the line moves from the right table to the left table,

But the problem is that the data being transferred does not appear in the left table. When I click on Inspect, the data appears on the console but is not visible in the interface. I do not know the solution to the problem.

EDIT

I SOLVED MY PROBLEM, the problem was from this line:

<div className="d-flex"> 

i delete d-flex and my problem was solved, but another problem appeared to me, that is the tables was under each other, and i need them to be next to each other.

import React, { useState } from "react";
import { Modal, ModalHeader, ModalBody, Table, Button } from "reactstrap";

const Popup = ({ procedureCatergory, isOpen, toggle }) => {
  const [rightTableData, setRightTableData] = useState([...procedureCatergory]);
  const [leftTableData, setLeftTableData] = useState([]);

  const moveToLeftTable = (item) => {
    setRightTableData((prevRightTableData) =>
      prevRightTableData.filter((data) => data.value !== item.value)
    );
    setLeftTableData((prevLeftTableData) => [...prevLeftTableData, item]);
  };

  const moveToRightTable = (item) => {
    setLeftTableData((prevLeftTableData) =>
      prevLeftTableData.filter((data) => data.value !== item.value)
    );
    setRightTableData((prevRightTableData) => [...prevRightTableData, item]);
  };

  return (
    <Modal isOpen={isOpen} toggle={toggle}>
      <ModalHeader>Popup</ModalHeader>
      <ModalBody>
        <div>
          <Table>
            <thead>
              <tr>
                <th>
                  #
                </th>
                <th>Name</th>
                <th>action</th>
              </tr>
            </thead>
            <tbody>
              {rightTableData.map((item) => (
                <tr key={item.value}>
                  <th scope="row">
                    {item.value}
                  </th>
                  <td>{item.label}</td>
                  <td>
                    <Button onClick={() => moveToLeftTable(item)}>Move</Button>
                  </td>
                </tr>
              ))}
            </tbody>
          </Table>
          {/* </div>

        <div className="d-flex"> */}
          <Table>
            <thead>
              <tr>
                <th>
                  #
                </th>
                <th>Name</th>
                <th>action</th>
              </tr>
            </thead>
            <tbody>
              {leftTableData.map((item) => (
                <tr key={item.value}>
                  <th scope="row">
                    {item.value}
                  </th>
                  <td>{item.label}</td>
                  <td><Button onClick={() => moveToRightTable(item)}>Move</Button></td>
                </tr>
              ))}
            </tbody>
          </Table>
        </div>
      </ModalBody>
    </Modal>
  );
};

export default Popup;