Button components inside ButtonGroup

There are two main issues:

1. You are adding a div around each of your buttons. This will interfere a little with the styling. Change this to a fragment (e.g. <> or <React.Fragment>) instead.

2. The way that ButtonGroup works is by cloning the child Button elements and adding props to control the styling. When you introduce a custom component in between, you need to pass through to the Button any props not used by your custom component.

Here is a working example:

import React from "react";import ReactDOM from "react-dom";import ButtonGroup from "@material-ui/core/ButtonGroup";import Button from "@material-ui/core/Button";import Modal from "@material-ui/core/Modal";const AModal = props => {  return (    <>      <Button {...props}>A</Button>      <Modal open={false}>        <div>Hello Modal</div>      </Modal>    </>  );};const OtherModal = ({ buttonText, ...other }) => {  return (    <>      <Button {...other}>{buttonText}</Button>      <Modal open={false}>        <div>Hello Modal</div>      </Modal>    </>  );};// I don't recommend this approach due to maintainability issues,// but if you have a lint rule that disallows prop spreading, this is a workaround.const AvoidPropSpread = ({  className,  disabled,  color,  disableFocusRipple,  disableRipple,  fullWidth,  size,  variant}) => {  return (    <>      <Button        className={className}        disabled={disabled}        color={color}        disableFocusRipple={disableFocusRipple}        disableRipple={disableRipple}        fullWidth={fullWidth}        size={size}        variant={variant}      >        C      </Button>      <Modal open={false}>        <div>Hello Modal</div>      </Modal>    </>  );};function App() {  return (    <ButtonGroup>      <AModal />      <OtherModal buttonText="B" />      <AvoidPropSpread />    </ButtonGroup>  );}const rootElement = document.getElementById("root");ReactDOM.render(<App />, rootElement);