Javascript - React wraps my component in a div

So I have two similar components, they have different structures but share the same CSS classes, but one of them gets wrapped in a div by React for no reason.

Both components are used in lists on the same view, but since one of them gets wrapped in a div, the width of that one gets weird.

Any reason why react is wrapping the component in an extra div?

This is the component that gets wrapped:

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Card, CardBlock, CardFooter, CardTitle, CardSubtitle, Button, Input     } from 'reactstrap'

class ActiveInvoice extends Component {

  check(selected) {    
    if(!selected){
      this.props.cart.Add({id: this.props.id, amount: this.props.amount}) 
    } 
    else {
      this.props.cart.Remove({id: this.props.id, amount: this.props.amount})     
    }
  }

  render() {
    const { receiver, dueDate, amount, currency, status, id } = this.props
    const selected = this.props.cartReducer.selectedInvoices.find((x) => x     === id) ? true : false
    return (
      <Card className='invoice'>
        <CardBlock onClick={() => this.check(selected)} className={selected ?     'checked' : 'unchecked'}>
          <Input className='selector' type='checkbox' checked={selected}     readOnly/>
          <CardTitle>{receiver}</CardTitle>
          <CardSubtitle className='due'>Förfallodatum {dueDate}    </CardSubtitle>
          <CardSubtitle className='status'>{status}</CardSubtitle>
          <CardTitle className='amount'>{amount} <span className='currency'>    {currency}</span></CardTitle>
        </CardBlock>
        <CardFooter>
          <Button className='pay'>Betala</Button>
          <Button className='details'>Detaljer</Button>
        </CardFooter>
      </Card>
    )
  }
}

export default ActiveInvoice

This one doesn't get wrapped:

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Card, CardBlock, CardFooter, CardTitle, CardSubtitle, CardText,     Button } from 'reactstrap'

class InactiveInvoice extends Component {

  render() {
    const { receiver, amount, currency, status, description } = this.props
    return (
      <Card className='invoice inactive'>
        <CardBlock>
          <CardTitle>{receiver}</CardTitle>
          <CardSubtitle className='status teal'>{status}</CardSubtitle>
          <CardTitle className='amount'>{amount} <span className='currency'>    {currency}</span></CardTitle>
          <CardText>{description}</CardText>
        </CardBlock>
        <CardFooter>
          <Button className='details'>Detaljer</Button>
        </CardFooter>
      </Card>
    )
  }
}

export default InactiveInvoice

React Code, where the components are used in view

Code in inspector where one of the components is wrapped

Components next to each other, one is narrow because it's wrapped.

Solution

Silly me. A container was created for the component that got wrapped which wrapped it in a div.