Why does this webpage only sometimes load /profile? and why when it does link to /profile, does the array get carried through as undefined?

Question

Simple input form on the home page linking into what is supposed to be a profile page. However I am having the two problems mentioned above. I have included the code below to see what people think. I don't understand why as soon as the array moves over to /profile it disappears. And why often the page doesn't even connect to /profile.

I have only a couple of months experience so need some expert advise regarding what the problem is. What is the problem in your opinion?

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import Home from './Home.js'
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'



const Profile = ({loading, setLoading, submitForm, setSubmitForm}) => {
  
  useEffect (() => {
    setInterval(() => {
      setLoading(false)
    }, 3000);
  }, []);

  return (<>
  
    {loading && (<div class="loading"><i class="fa fa-spinner fa-spin"></i>
    
    <div>Loading</div></div>)}
      {!loading && (
      <div class="main">
        <div class="profile col-10"><div class="imageDiv">
          <img class="image" src={require("./R (1).png")} alt="person"></img>
          </div>
        </div>
      </div>
    )}
  </>)
}



function App() {
  const [firstName, setFirstName] = useState('');
  const [secondName, setSecondName] = useState('');
  const [submitForm, setSubmitForm] = useState([]);
  const [ageMin, setAgeMin] = useState(18);
  const [ageMax, setAgeMax] = useState(80);
  const [selectOne, setSelectOne] = useState('Man')
  const [selectTwo, setSelectTwo] = useState('Woman')
  const [loading, setLoading]= useState(true)

  return (
    <Router>  
    <div className="App">
    <Routes>
    <Route path="/" element={<Home selectOne={selectOne} setSelectOne={setSelectOne} selectTwo={selectTwo} setSelectTwo={setSelectTwo} firstName={firstName} setFirstName={setFirstName} secondName={secondName} setSecondName={setSecondName} ageMin={ageMin} setAgeMin={setAgeMin} ageMax={ageMax} setAgeMax={setAgeMax} submitForm={submitForm} setSubmitForm={setSubmitForm}/>}></Route>
    <Route path="/Profile" element={<Profile loading={loading} setLoading={setLoading}/>}></Route>      
    </Routes>
    </div>
    </Router>
  );
}

export default App; ```






```import React, {useState} from 'react';
import { Link } from 'react-router-dom';

function Home ({firstName, setFirstName, secondName, setSecondName, submitForm, setSubmitForm, ageMin, setAgeMin, ageMax, setAgeMax, selectTwo, setSelectTwo, selectOne, setSelectOne}) {
  
    const FNNow = (e) => {
      const first = e.target.value;
      setFirstName(first)
      
    }
  
    const SNNow = (e) => {
      const second = e.target.value;
      setSecondName(second)
    }
  
    const SetAgeMin = (e) => {
      const min = e.target.value;
      setAgeMin(min); 
    }
  
    const SetAgeMax = (e) => {
      const max = e.target.value;
      setAgeMax(max);
    }
  
    const FirstSelect = (e) => {
      const fSel = e.target.value;
      setSelectOne(fSel)
    }
  
    const SecondSelect = (e) => {
      const sSel = e.target.value;
      setSelectTwo(sSel)
    }
  
    const Submit = (e) => {
      setSubmitForm([
        ...submitForm,
        {FirstName: firstName, SecondName: secondName, MinAge: ageMin, MaxAge: ageMax, amA: selectOne, sA: selectTwo}])
        
      }
      
      
    return (
     <div class="formDiv">
        <div id='mainForm'>
          <div class="row m-3">
            <div class="col">
            <input class="form-control form-control-lg" value={firstName} type="text" placeholder="First Name" onChange={FNNow} required/>
            </div>
          <div class="col">
          <input class="form-control form-control-lg" value={secondName} type="text" placeholder="Second Name" onChange={SNNow} required/>
          </div>
          </div>
          <div class="lineOne p-3">
            <div class="iam"><h5>I am a:</h5>
            <div class="px-4">
            <select onChange={FirstSelect}>
              <option type="text" >Man</option>
              <option type="text" >Woman</option>
            </select>
            </div>
            </div>
            <div class="iam"><h5>Seeking a:</h5>
            <div class="px-4">
            <select onChange={SecondSelect}>
              <option type="text" >Man</option>
              <option type="text" >Woman</option>
            </select>
            </div>
            </div>
            </div>
            <div class="lineOne p-3">
            <div class="iam"><h5>Between ages:</h5>
            <div class="px-4">
            <input type="number" min="18" max="80" value={ageMin} onChange={SetAgeMin}/>
            </div>
            </div>
            <div class="iam"><h5>and:</h5>
            <div class="px-4">
            <input type="number" min="18" max="80" value={ageMax} onChange={SetAgeMax}/>
            </div>
            </div>
            </div>
            <div class="btny p-3">
              <button type="button" onClick={Submit} class="btn btn-primary btn-lg w-100 ms-3 me-3"><Link id="buttonLink" to="/profile">Submit</Link></button>
            </div>
          </div>
        </div>
    )
  }

  export default Home;