Map loads incorrectly Leaflet with React

Question

I've tried to use "leaflet" && "react-leaflet", but in both cases map displays like this. I can interact with this map, but map pieces showing incorrectly, with distance. Looks like not all map pieces loads, or maybe incorrect css styles. PLease check this code:

import React, { useState, useEffect }  from "react";
import styled from "styled-components";
import ScrollHandler from "../../components/ScrollHandler";
import SectionWipes from "../../components/SectionWipesComponent/SectionWipes";
import "./BodyHomePage.css";
import L, { LatLngExpression } from 'leaflet';

function BodyHomePage()
{
    const _isScrolled = ScrollHandler();
    const position: LatLngExpression = [51.505, -0.09];
    const [isMapCreated, setCount] = useState(false);
    
    useEffect(() => {
            if(!isMapCreated)
            {
                const map = L.map('map').setView(position, 13);
                
                L.tileLayer('https://api.maptiler.com/maps/basic/{z}/{x}/{y}.png?key=L7jWH8UlPu3enKseP3Nw', {
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
                }).addTo(map);
                
                L.marker(position)
                .addTo(map)
                .bindPopup('A pretty CSS3 popup. <br> Easily customizable.');
                setCount(true);
        }
      });


    
    return(
        <div style={{position: "absolute", top: "1px", zIndex: -1}}>
            <StyledDiv style={{height: "120vh"}}>
                <StyledVideo src={backgroundSmokeVideo} autoPlay muted loop />
                <StyledFlexVideoContainer isScrolled={_isScrolled}>                    
                    <h1 style={{fontFamily:"PermanentMarker-Regular", fontSize: "12vw", mixBlendMode: "overlay", color: "#fff"}}>
                        Smokey Way
                    </h1>
                </StyledFlexVideoContainer>
            </StyledDiv>
            <SectionWipes/>
            <StyledDiv style={{backgroundColor: "black"}}>

            </StyledDiv>
            <StyledDiv style={{backgroundColor: "pink"}}>
            <div id="map" ></div>
        </div>
    )
}
export default BodyHomePage;