I keep getting this weird error in my React that says

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `ContactTemplate`.

I tried to remove each of the import to see where the error is, but nothing works.

My ContactTemplate.jsx:

import React from 'react';
import { Container } from '~/components/interface/Container';
import PreviewBar from '~/components/PreviewBar';
import HeroFull from '~/components/HeroFull/HeroFull';
import { Wrapper, Columns, Paragraph, BigText } from './ContactTemplate.styles';
import { Link } from '~/components/interface/Link';

const ContactTemplate = ({ preview }) => {
  const data = [
    {
      name: 'Name 1',
      job: 'Bestuursrechts',
      phone: '+31 (0) 612345678',
      email: 'Email',
      link: 'https://www.linkedin.com',
    },
    {
      name: 'Name 2',
      job: 'Intellectuele eigendom en contractenrecht',
      phone: '+31 (0) 612345678',
      email: 'email',
      link: 'https://www.linkedin.com',
    },
  ];

  return (
    <>
      <Wrapper>
        {preview && <PreviewBar />}
        <HeroFull
          title="Contact"
          intro="We offer ...."
        />
      </Wrapper>
      <Container>
        <Columns>
          {data.map(item => (
            <div>
              <BigText>{item.name}</BigText>
              <Paragraph>{item.job}</Paragraph>
              <Paragraph>{item.phone}</Paragraph>
              <Paragraph>{item.email}</Paragraph>
              <Link>{item.link}</Link>
            </div>
          ))}
        </Columns>
      </Container>
    </>
  );
};

export default ContactTemplate;

Could someone help me out with this please? If there are more files needed I'll add them on request.