how to fix the a component or section is not show in React on launch or refreshing the browser?

 I use React-Carousel to implement a carousel for my app. however i found something is weird. the carousel is functiong well during the run. However I refresh the browser with F5 key, the carousel disappear. here is the snippet of code for the carousel.

 return <CarContainer>

             <Carousel value={current} onChange={setCurrent} slides={

cars.map(item=><Car {...item} />)}
            plugins={[
                "clickToChange",
                {
                  resolve: slidesToShowPlugin,
                  options: {
                    numberOfSlides: 3,
                  },
                },
              ]}
              
              breakpoints={{
                640: {
                  plugins: [
                    "clickToChange",
                    {
                      resolve: slidesToShowPlugin,
                      options: {
                        numberOfSlides: 1,
                      },
                    },
                  ],
                },
                900: {
                  plugins: [
                    {
                      resolve: slidesToShowPlugin,
                      options: {
                        numberOfSlides: 2,
                      },
                    },
                  ],
                },
              }}
            /><Dots value={current} onChange={setCurrent} number={numberOfDots}/>
        </CarContainer>

the root cause of this issue is that the cars object is still null, whenn it 

render during the refresh.

slides={cars.map(item=><Car {...item} />)}

the safe way and best practice is to make sure the data is ready before the 

component rendering. since the component will not render after the data 

is ready, unless we update the cars object in the useEffect hook. 

We can either check if cars object is null return null to prevent the 

carousel render. if(!cars) return null;

or we can use the inline conditional expression wiht logical && operator.

 return cars && <CarContainer>
             <Carousel value={current} onChange={setCurrent} slides={
cars.map(item=><Car {...item} />)}
            plugins={[
                "clickToChange",
                {
                  resolve: slidesToShowPlugin,
                  options: {
                    numberOfSlides: 3,
                  },
                },
              ]}
              
              breakpoints={{
                640: {
                  plugins: [
                    "clickToChange",
                    {
                      resolve: slidesToShowPlugin,
                      options: {
                        numberOfSlides: 1,
                      },
                    },
                  ],
                },
                900: {
                  plugins: [
                    {
                      resolve: slidesToShowPlugin,
                      options: {
                        numberOfSlides: 2,
                      },
                    },
                  ],
                },
              }}
        /><Dots value={current} onChange={setCurrent} number={numberOfDots}/>
        </CarContainer>