React button group | target parent onClick w/ props

Button.js

import React from 'react';

const Button = (props) => {
  const name = props.name;
  const msg = props.msg;
  const id = props.id;
  const color = (msg === 'on') ? 'green' : 'red';

  return (
    <div style={{ padding: '1rem', border: '1px solid' + color }}>

      <button onClick={() => props.onClick(props.id)}>
        {name} is {msg}
      </button>

    </div>
  );
}

export default Button;

ButtonGroup.js

import React, { useState } from "react";
import classnames from "classnames";
import classnamesBind from 'classnames/bind';

import Button from "./Button";

import scss from "./OnOff.module.scss";
const cx = classnamesBind.bind(scss);

const OnOff = ({ buttons }) => {
  const [clickedId, setClickId] = useState(-1);

  return (
      {buttons.map( (buttonLabel, i) => (
        <Button
          key={i}
          id={i}
          msg={(i === clickedId) ? 'on' : 'off'}
          name={buttonLabel}
          onClick={(id) => setClickId(id)}
          />
      ))}
    </div>
  );
}

export default OnOff;

ButtonGroup.module.scss

.customButton {
  background-color: #E0314B;
  border: 1.5px solid #E0314B;
  border-radius: 5px;
  cursor: pointer;
  color: white;
  height: 50px;
  font-size: 32px;
  letter-spacing: 0.5px;
  width: 150px;
}

.active {
  background-color: rgb(25, 26, 24);
  border: 1.5px solid rgb(25, 26, 24);
}