Column width changing when I change size per page

Hey I've been having some trouble with custom column width recently. Every time I click to change how many rows per page I see, my table columns change width increasing the size of the first columns while shortening the last ones. I'm creating the table fields dinamically and passing the width params through the element props, It could maybe one of the reasons.

Piece of my code:
Object used to create the table
`
this.tableFields = [

{dataField: "id", label: "Id", isKey: true, dataSort: true, width: '4'},
{dataField: "plate", label: "Placa", dataSort: true, width: '7'},
{dataField: "brand", label: "Marca", dataSort: true, width: '15'},
{dataField: "model", label: "Modelo", dataSort: true, width: '26'},
{dataField: "year", label: "Ano", dataSort: true, width: '5'},
{dataField: "emergency-contact", label: "Contato de Emergência", dataSort: true, width: '20'},
{dataField: "emergency-phone", label: "Telefone de emergência", dataSort: true, width: '13'},
{dataField: "plan", label: "Plano", dataSort: true, width: '10'},
`
]

Table creation

`
return(

{
this.props.tableFields.map((column, index) => {
return (

{column.label}

)
})
}

`)

Desired result

Output result after several size per page changes