Nextjs changes my custom components to div's

Question

My components (ElementTile) in my page transform into div's when i view them in the browser. CSS rules which apply to "ElementTile", also not work (expected of course, because they are changed to div's) Why is that and can i change that behaviour?

Thanks in advance! ^^

page.tsx:

import React from 'react';
import ElementTile from '@app/components/ElementTile/ElementTile';
import { elements } from '@public/libraryChemistry';
import { useLanguageData } from '@data/languageLoader';
import PSEFilter from '@app/components/PSEFilter/PSEFilter';


const Projects: React.FC = () => {
  const data = useLanguageData("periodicTable");
  return (

    <main className='mx-auto max-w-9xl mt-40 md:mt-20 lg:mt-24'>
      <PSEFilter/>
      <div className="grid grid-cols-18 grid-rows-9 gap-0 sm:gap-1 lg:gap-2 xl:gap-4">
        {/* Line Number 1 */}
        <ElementTile className='bg-cyan-500' elementData={elements[0]} />
        <ElementTile className='bg-purple-500 col-start-18' elementData={elements[1]} />
        {/* Line Number 2 */}
        <ElementTile className='bg-red-500' elementData={elements[2]} /> 
...

ElementTile.tsx:

import { ElementData } from '@public/libraryChemistry';
import React, { useState } from 'react';
import ElementPopUp from '../ElementPopUp/ElementPopUp';

interface ElementTileProps {
  elementData?: ElementData;
  className?: string;
}

const ElementTile: React.FC<ElementTileProps> = ({ elementData, className }) => {
  const [isPopUpVisible, setIsPopUpVisible] = useState(false);

  const togglePopUp = () => {
    setIsPopUpVisible(!isPopUpVisible);
  };

  return (
    <div
      className={`flex aspect-square cursor-pointer text-center items-center justify-center duration-300 text-xs md:text-xl xl:text-2xl text-black p-1 md:p-2 xl:p-4 border-[#404040] sm:border-2 hover:border-4 hover:z-10 hover:border-black p-auto ${className}`}
      onClick={() => {
        if (elementData) {
          togglePopUp();
        }
      }}
    >
      {elementData ? elementData.kurzsymbol : '↓'}

      {isPopUpVisible && (
        <ElementPopUp onClose={togglePopUp} elementData={elementData} />
      )}
    </div>
  );
};

export default ElementTile;

As you can see, no ElementTile's anymore, just div's:

Answer 1

The component 'ElementTile' contains a div as its parent tag. So All you can see is element with the className attributes assigned to it. It is the natural behaviour of the React JSX.