() => {
  const [colorSm, setColorSm] = useState('')
  const [colorMd, setColorMd] = useState('')

  return (
  <div className="d-flex bg-light p-2" style={{ columnGap: '1rem' }}>
    <ColorPicker color={colorSm} setColor={setColorSm} size="sm" />
    <ColorPicker color={colorMd} setColor={setColorMd} size="md" />
  </div>
  )
}

() => {
  const [color, setColor] = useState('#32116c')
  const [colorBad, setColorBad] = useState('#badcolor')

  return (
  <div className="d-flex bg-light p-2" style={{ columnGap: '1rem' }}>
    <ColorPicker color={color} setColor={setColor} />
    <ColorPicker color={colorBad} setColor={setColorBad} />
  </div>
  )
}