validateDOMNesting(...) warning in react

Question

I want to create a collapsable table with the help of bootstrap classes and I successfully created that but in console, I got this warning :

validateDOMNesting(...): <div> cannot appear as a child of <td>

my code:

<table className="table table-hover order_details_table">
      <thead>
        <tr>
          <th scope="col">Order ID</th>
          <th scope="col">Person Name</th>
          <th scope="col">Order Date</th>
          <th scope="col">Order Amount</th>
        </tr>
      </thead>
      <tbody>
        {data?.map((order) => {
          return (
            <Fragment key={order.id}>
              <tr
                data-bs-toggle="collapse"
                data-bs-target={`#${order.name}`}
                aria-expanded="false"
                aria-controls={order.name}
              >
                <th scope="row">{order.id}</th>
                <td>{order.name}</td>
                <td>{order.date}</td>
                <td>{order.amount}</td>
              </tr>
              <tr>
                <td colSpan="4" className="table_collapse">
                  <div className="collapse" id={order.name}>
                    <div style={{ padding: "20px" }}>
                      Some placeholder content for the collapse component. This
                      panel is hidden by default but revealed when the user
                      activates the relevant trigger.
                    </div>
                  </div>
                </td>
              </tr>
            </Fragment>
          );
        })}
      </tbody>
    </table>

Now my question is :

1) Is it safe to ignore this warning?
2) If not then what to modify here to fix it?