Button Flickering onHover in React

Question

I have 2 Components "TableCard" et "TableGrouping". I have a component inside "TableCard" called "Grouping".

When I hover the button with my mouse it is flickering/flashing on my screen. The 2 components are separated in 2 files because I need to modify the content of "TableGrouping" in "TableCard" (when I put directly the content of grouping into "TableGrouping" it's working fine but it's not my objective.

Here is my code:

export function TableGrouping(props) {
  return (
    <div className="form">
      <div className="row align-items-center form-group-actions margin-top-20 margin-bottom-20">
        <div className="col-xl-12">
          <div className="form-group form-group-inline">
            <div className="form-label form-label-no-wrap">
              {props.children}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export function TableCard() {
  const Grouping = () => {
    function BtnSupprimer(props) {
      return <Button>test</Button>;
    }

    return (
      <>
        <BtnSupprimer/>
      </>
    );
  };
return (
   <TableGrouping>
     <Grouping />
   </TableGrouping>
  );
}

Link of what it's doing : here

Do some of you have an Idea ? Thank you :)