JS-less React Accordeon

Accordeon.jsx

import React from 'react';
import styled from 'styled-components';

const Header = styled.label`
  cursor: pointer;
`;

const Title = styled.p`
`;

const Content = styled.div`
  display: none;
`;

const HiddenCheckbox = styled.input`
  display: none;
  &:checked + ${Header} + ${Content} {
    display: block;
  }
`;

const Accordeon = ({ title, children }) => (
  <>
    <HiddenCheckbox type="checkbox" id={title} />
    <Header htmlFor={title}>
      <Title>{title}</Title>
    </Header>
    <Content>{children}</Content>
  </>
);

export default Accordeon;