Компоненты React загружаются до завершения расчетов

Question

Уважаемые Я работаю над проектом React и в настоящее время борюсь с небольшой проблемой. в чем проблема? Когда приложение загружается в мобильном представлении, я вижу, что отображаются все компоненты, и через несколько мс ненужные данные исчезают. Я хочу изменить свое приложение так, чтобы отображались только необходимые компоненты.

import React, { useState, useEffect } from "react";
import styled from "styled-components";
import PropTypes from "prop-types";
import RegistrationInputSide from "./../RegistrationInputSide/RegistrationInputSide";
import AppInfoSide from "./../AppInfoSide/AppInfoSide";
import SuccessWindow from "./../SuccessWindow/SuccessWindow";
import { names, labels, types} from "./registrationFormData";


const FormStyle = styled.div.attrs(({ className }) => ({
  className,
}))`
  display: flex;
  width: 100%;
  height: 100%;

  .fields {
    display: ${({ fieldsVisibility }) => (fieldsVisibility ? "flex" : "none")};
  }
  .info {
    display: ${({ infoVisibility }) => (infoVisibility ? "flex" : "none")};
  }
`;

const RegistrationForm = ({user, onChange, validation, onSubmit, formCorrectness, formModified}) => {
  const [isMobile, setIsMobile] = useState(false);
  const [isMoved, setIsMoved] = useState(false);
  const [firstRender, setFirstRender] = useState(true);
  const {password, repeatedPassword, email } = user;
  const {emailValidation, passwordValidation, repeatedPasswordValidation} = validation;


  const calculateMobileVisibility = (form) => {
    const {name, isMobile} = form;
    const visibilityRequirements = {
      "info": [{"isMobile":true, "isMoved":false, "isModified":false, "formCorrectness": false}],
      "fields": [{"isMobile":true, "isMoved":true, "isModified":false, "formCorrectness": false},{"isMobile":true, "isMoved":false, "isModified":true, "formCorrectness": false}, {"isMobile":true, "isMoved":true, "isModified":true, "formCorrectness": false}],
      "success": [{"isMobile":true, "isMoved":true, "isModified":false, "formCorrectness": true},{"isMobile":true, "isMoved":false, "isModified":true, "formCorrectness": true}, {"isMobile":true, "isMoved":true, "isModified":true, "formCorrectness": true}]
    }

    if(isMobile === false){
      return true;
    }

    const requirements = visibilityRequirements[name];
    delete form.name;

    let resultArr = requirements.map(requirement => {return Object.keys(form).map(formItem => requirement[formItem] === form[formItem])});

    const finalArr = resultArr.map(singleRes => singleRes.every((val) => val === true));

    return finalArr.includes(true);
  };


  const calculateInfoSideVisiblity = () => {
    return calculateMobileVisibility({"isMobile":isMobile, "isMoved": isMoved, "isModified": formModified ,"formCorrectness": formCorrectness, "name": "info"});
  }

  const calculateFieldsSideVisibility = () => {
    return calculateMobileVisibility({"isMobile":isMobile, "isMoved": isMoved, "isModified": formModified ,"formCorrectness": formCorrectness, "name": "fields"});
  }

  const onClickHandleMobile = (e) => {
    e.preventDefault();
    setIsMoved(true);
  };

  const handleResize = () => {
    window.visualViewport.width > 576 ? setIsMobile(false) : setIsMobile(true);
  };

  useEffect(() => {
    if(firstRender===true){
      handleResize();
      setFirstRender(false);
    }

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  });

  return (
    <FormStyle fieldsVisibility={calculateFieldsSideVisibility()} infoVisibility={calculateInfoSideVisiblity()}>
      <form onSubmit={onSubmit}>
        <AppInfoSide
          className="form-info-side info"
          onClick={onClickHandleMobile}
        />
        {!formCorrectness && (<RegistrationInputSide
          className="form-user-input-side fields"
          inputFieldsData={inputFieldsData}
          onClick={onSubmit}
          onChange={onChange}
          user={user}
        />)}
        {formCorrectness && (<SuccessWindow
          className="success-window fields"
          successMessage="Account successfully created!"
        />)}
      </form>
    </FormStyle>
  );
};

Я не знаю, как предотвратить отображение нежелательных элементов.