I can’t solve the error “Uncaught SyntaxError: Unexpected token ‘<'"

JS:

import React from "react";
import { ReactDOM } from "react";
import './style.css';
import App2 from "./App2.js";

function App() {
    return (
        <App2.js />
    )
}

ReactDOM.render(<App />, document.getElementById('root'))

Referred App2.js in the above file:

import React from "react";
import { ReactDOM } from "react";

export default function App2() {
    return (
        <div>
            <h1>Yusif Ahmedov</h1>
            <button id="email"></button>
            <button id="linkedin"></button>
            <h2>Front-End Developer</h2>
            <header id="about-header">About</header>
            <p id="about">I am a front-end developer who is passionate about coding and engaging both creative and practical side of the human potential.</p>
            <header id="interests-header">Interests</header>
            <p id="interests">Productivity articles, Time Management, Coffee, Music, Sports, Social Activities.</p>
        </div>
    )
    }

And simple HTML:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Card</title>
    <script type="module" src="./App.js" defer></script>
</head>
<body>
    <div id="root"></div>
</body>
</html>

I wrote all from scratch and so there are no extra files.
When I run it, it gives an error:
Uncaught SyntaxError: Unexpected token ‘<‘ App.js:8(line)

I didn’t get it why it gives an error on the 8th line.