Не могу отобразить React App в html

Написал React приложение, которое при поиске исполнителя через Spotify API выдает все альбомы:

'use strict';

const e = React.createElement;

import logo from './logo.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Container, InputGroup, FormControl, Button, Row, Card} from 'react-bootstrap';
import { useState, useEffect} from 'react';

class LikeButton extends React.Component {
    constructor(props) {
        super(props);
    }



    render() {
        const [searchInput, setSearchInput] = useState("");
        const [acessToken, setAcessToken] = useState("");
        const [albums, setAlbums] = useState([]);

        const CLIENT_ID = "2c8ed13da29f45b990a1ad43ba870f7d";
        const CLIENT_SECRET = "c18c855bfbe442d6aed8b9df99ae131f";

        useEffect(() => {
            //API Acess Token
            var authParameters ={
                method: 'POST',
                headers:{
                    'Content-Type' : 'application/x-www-form-urlencoded'
                },
                body: 'grant_type=client_credentials&client_id=' + CLIENT_ID + '&client_secret=' + CLIENT_SECRET
            }

            fetch('https://accounts.spotify.com/api/token', authParameters)
                .then(result => result.json())
                .then(data => setAcessToken(data.access_token))
            //token
        }, [])


        //Search
        async function search(){
            console.log("Search for " + searchInput);

            //Get request using search to get the Artist ID
            var searchParametrs = {
                method: 'GET',
                headers:{
                    'Content-Type' : 'application/json',
                    'Authorization' : 'Bearer ' + acessToken
                }
            }

            var artistID = await fetch('https://api.spotify.com/v1/search?q=' + searchInput + '&type=artist', searchParametrs)
                .then(response => response.json())
                .then(data => {return data.artists.items[0].id})
                .then(console.log("The Artist ID is " + artistID));

            //Get request with Artist ID to grab all the albums from the artist
            var returnedAlbums = await fetch('https://api.spotify.com/v1/artists/' + artistID + '/albums' + '?include_groups=album&market=US&limit=50', searchParametrs)
                .then(response => response.json())
                .then(data => {
                    console.log(data);
                    setAlbums(data.items);
                });
            //Dispaly all the albums

        }

        console.log(albums);





        return e(
            <div className="App">
                <Container>
                    <InputGroup className="mb-3" size="lg">
                        <FormControl
                            placeholder="Search for Artist"
                            type="input"
                            onKeyPress={event =>{
                                if(event.key == "Enter"){
                                    console.log("Pressed Enter");
                                    search();
                                }
                            }
                            }
                            onChange={event => setSearchInput(event.target.value)}
                        />

                        <Button onClick={search}>
                            Search
                        </Button>
                    </InputGroup>
                </Container>

                <Container>
                    <Row className="mx-2 row-cols-4">
                        {albums.map((album, i) => {
                            console.log(album);
                            return(
                                <Card>
                                    <Card.Img src={album.images[0].url}/>
                                    <Card.Body>
                                        <Card.Title>{album.name}</Card.Title>
                                    </Card.Body>
                                </Card>
                            )
                        })}
                    </Row>
                </Container>

            </div>
        );
    }
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(e(LikeButton));

Хочу вставить его в свою html форму:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
</head>
<body>

<h2>Add React in One Minute</h2>
<p>This page demonstrates using React with no build tooling.</p>
<p>React is loaded as a script tag.</p>

<!-- We will put our React component inside this div. -->
<div id="like_button_container"></div>

<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

<!-- Load our React component. -->
<script src="/js/like_button.js"></script>

</body>
</html>

Програма не отображается. P.S: В реакте разбираюсь только пару дней