How to render for dom elements in react?

Question

React

Good day! I'm doing a pet project, weather. I wanted to make sure that when the weather changes, the background matches the weather. Let's say it's raining, drops are dripping on the background, etc.
In the code, I render the drop positions, then assign them to the element.

let array = []
const Home = (props) => {
  const weatherParts = 500
  const { activeWeatherForecast } = useSelector(state => state.currentWeekday)

  React.useEffect(() => {
    for (let i = 0; i < weatherParts; i++) {
      array.push([renderPositionY(), renderPositionX()])
    }
  }, [activeWeatherForecast])

  const renderPositionX = () => {
    return Math.floor(Math.random() * document.body.clientWidth)
  }

  const renderPositionY = () => {
    return Math.floor(Math.random() * document.body.clientHeight)
  }
  ...
  {array.length > 0 && array.map(elem => {
            return <div className={s.weatherParts} style={{ top: `${elem[0]}px`, left: `${elem[1]}px` }}></div>
   })}
}

The problem is that the element is not showing. There are no renders in the DOM tree.
There are other rendering options, if so, please suggest.

Answer 1

Read the documentation, you don't seem to have opened it. First we read, preferably in full, then we write, it will not work on its own.
https://reactjs.org/docs/getting-started.html