Следующая ошибка JS при использовании тегов JSX

Question

import React, { Component } from 'react';
import dynamic from 'next/dynamic';
import { Card } from 'semantic-ui-react';
import ReactDom from 'react-dom';
import factory from '../ethereum/factory';


class CampaignIndex extends Component {

    static async getInitialProps(){
        const campaigns = await factory.methods.getDeployedCampaigns().call();

        return { campaigns };
    }

    renderCampaigns() {
        const items = this.props.campaigns.map(address =>{
            return {
                header: address,
                description: 'View campaign',
                fluid: true
            };
        });

        return( 
            <Card.Group items={items}/>
        );
    }

    render() {
        return (
            this.rendercampaigns() 
        )
    } 
}

export default CampaignIndex;

  Syntax Error: Unexpected token (26:12)    
  24 |
  25 |         return(
> 26 |             <Card.Group items={items}/>
     |             ^
  27 |         );
  28 |     }
  29 |

Я получаю подобную ошибку всякий раз, когда пытаюсь использовать любой из тегов<> в моей программе.

Я использую следующий JS с sematic-UI-реагировать.

Для запуска я использую npm run dev на локальном хосте:3000.

Может ли кто-нибудь помочь мне с чем-нибудь.