Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>. #29

[raneem13j]

I have an error keeps giving me the: Warning: validateDOMNesting(...): cannot appear as a descendant of . #29
even I put each button in a div I still have the same error
This is my code:

// import { render } from "@testing-library/react";
import "./clientsdashboard.css";
import React, { useState, useEffect } from "react";
import axios from "axios";
import edit from "../../../assets/assets/Icons/icons8-create-64.png";
import delet from "../../../assets/assets/Icons/icons8-trash-can-64.png";
import add from "../../../assets/assets/Icons/icons8-add-new-64.png";
// import { Link } from "react-router-dom";
import ClientsEditForm from "../../../components/clientsEditForm/clientsEditForm";

const Clientsdashboard = () => {
  const [data, setData] = useState([]);
  const [showEditForm, setShowEditForm] = useState(false);
  const [currentId, setCurrentId] = useState("");

  useEffect(() => {
    axios
      .get("http://localhost:5000/clients/")
      .then((response) => {
        setData(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  const categories = [];
  data.forEach((card) => {
    if (!categories[card.category_name]) {
      categories[card.category_name] = [];
    }
    categories[card.category_name].push({
      client_name: card.client_name,
      client_city: card.client_city,
    });
  });

  const handleDelete = (id) => {
    axios
      .delete(`http://localhost:5000/clients/${id}`)
      .then(() => {
        setData(data.filter((card) => card._id !== id));
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const handleEdit = (id) => {
    setShowEditForm(true);
    setCurrentId(id);
  };
  const handleCloseClick = () => {
    setShowEditForm(false);
  };

  return (
    <>
      <div className="ccclients_container">
        <div className="cchead_container">
          <h1 className="ccheadline1 ccinside">OUR</h1>
          <h1 className="ccheadline2 ccinside">CLIENTS</h1>
        </div>
        <div className="ccsection ccsection_clients">
          {Object.keys(categories).map((category_name,) => (
            <>
              <div className="cccard">
                <div className="cccategory">
                  <h2 className="cccategory_h">{category_name}</h2>
                </div>
                <div className="ccclients_card">
                  {categories[category_name].map(
                    ({ client_name, client_city, index }, i) => (
                      <ul className="ul" key={data[i]._id}>
                        <li className="li-cc">
                          {client_name}-
                          <span className="span-cc">{client_city}</span>
                        </li>
                        <div>
                        <button
                          id="myBtn"
                          className="btn"
                          onClick={() => handleEdit(data[i]._id)}
                        >
                          {showEditForm && (
                            <ClientsEditForm
                              id={currentId}
                              onClose={handleCloseClick}
                            />
                          )}
                          <img src={edit} alt="" className="edit" />
                        </button>
                        </div>
                        <div>
                        <button
                          className="btn"
                          onClick={() => handleDelete(data[i]._id)}
                        >
                          <img src={delet} alt="" className="edit" />
                        </button>
                        </div>
                      </ul>
                    )
                  )}
                  <img src={add} alt="" className="edit" />
                </div>
                <div></div>
              </div>
            </>
          ))}
        </div>
      </div>
    </>
  );
};

export default Clientsdashboard;

in this code when I click on edit icon a form component pop up