Update how children are rendered to prevent state loss

[YoussefHenna]

The issue

children = (() => React.Children.toArray(this.props.children))(); The use of an anonymous function here for rendering the children effectively creates new components on every rerender of the parent. This creates an issue for example when you have a TextInput in one of the children with a hoisted state, for every character you write new components are created and all state is lost.

The Fix

This fix just takes the children from the props and renders it, which fixes this issue.

My temporary workaround

The workaround I am using at the moment is a somewhat not-so-pretty monkey patch:

 React.useEffect(() => {
    const childrenArray = React.Children.toArray(
      swiperRef.current?.props?.children
    );
    if (swiperRef.current) {
      swiperRef.current.children = childrenArray;
      swiperRef.current.count = childrenArray.length;
      swiperRef.current.forceUpdate();
    }
  }, [children]);

Where children is a variable holding the children I render inside the Swiper.