How to use the linaria/react.styled.hr function in linaria

import { styled } from 'linaria/react';

export const Spacer = styled.hr`
  width: 2.083em;
  height: 0.1388em;
  border: none;
  background: #fff;
  margin: 0.1388em 0px;
`;

export const BlackSpacer = styled.hr`
  width: 2.083em;
  height: 0.1388em;
  border: none;
  background: #000;
  margin: 0.1388em 0px;
`;

}

  &:checked ~ label {
    color: #111;
    user-select: none;
  }
`;

const LogoImage = styled.img`
  display: block;
  height: 48px;
  width: auto;
  margin: 32px 32px 0;
`;

const SeparatorItem = styled.hr`
  border: 0;
  background-color: rgba(0, 0, 0, 0.04);
  height: 1px;
  margin: 20px 0;
`;

const LinkItem = styled(Link)`
  display: block;
  padding: 12px 0;
  text-decoration: none;
  color: #888;
  line-height: 1;

  &:hover {
    color: #111;
    text-decoration: none;