Cannot read properties of null (reading 'children') in React but in Vanilla.js works

Question

I am doing a React App and trying to make a image slider. I am working in replit.com and in the React App the JS won't work. When I made it in a simple Repl (HTML, CSS and Vanilla.js only) works perfectly.

When I try to do a query select and console log the ul with the className="carousel-track" prop out I get null so it breaks it all.

Carousel component:

import React from 'react';

import Slide from "./Slide";
import Dot from "./Dot"

import "../css/carousel.scss";
// import "../js/carousel.js"

export default function Carousel(props) {
  const { players } = props;
    
    const allSlides = players.map(player => {
        return <Slide
                key={player.key}
                name={player.name}
                team={player.team}
                img={player.img}
            />

});

    const allDots = players.map(player => {
    return <Dot key={players.indexOf(player)}/>
})

return (
    <div className="carousel">
        
        <button className="carousel-btn btn-left">
            <i className="fa-solid fa-paper-plane"></i>
        </button>
  <div className="carousel-track-container">
    <ul className="carousel-track">
                {allSlides}
            </ul>
        </div>
  <button className="carousel-btn btn-right">
    <i className="fa-solid fa-paper-plane"></i>
        </button>

        <div className="carousel-nav">
            {allDots}
        </div>
    </div>
  )

}

And the logic is exactly the same with the one that you can see in the Sources Inspect tab at this link.

If I uncomment that import "../js/carousel" it breaks and nothing is rendered in the page