react-bulma components using Column results in unexpecteed token

I have a react component that tries to render two columns:

render() {
  return (
    <Section>
       <Container>
          <Columns>
             <Columns.Column size={6}>
               <SearchCard />
             </Columns.Column>

             <Columns.Column size={6}>
               <DocumentCard/>
             </Columns.Column>
          </Columns>
       </Container>
    </Section>
  )
}

but this gets the following error:

    SyntaxError:...node_modules/react-bulma-components/src/components/columns/components/column.js: Unexpected token (26:2)

  24 |   ...props
  25 | }) => (
> 26 |   <Element
     |   ^
  27 |     {...props}
  28 |     className={classNames(className, 'column', {
  29 |       [`is-${size}`]: size,

I have tried to follow the advice of purring section, then container, then columns. but this is a confusing error to pop up. I do not understand this. Could someone explain?