passed parent state to child then updated the state and passing it to another child does not pass the state to the second child

Question

I have a parent component that renders to child components, the parent state has empty strings that will be updated in the children components from the user inputs. I have routes set in the parent components where I put paths to the children components and pass the state in props. the state is passed perfectly to the first child component and is updated with the user's input and then on button click, it navigates to the second child.

the problem is in the second child the state objects are undefined so I guess the state hasn't passed correctly.

this is the parent code adminData.js

    import react, {useState} from 'react';
    import { Route, Routes } from 'react-router-dom';
    
    import Nav from '../nav';
    import SignUpAdmin from '../signA';
    import ProfileAdmin from '../profileA';
    
    const AdminData = () => {
    
        //state to be sent to backend
        const intialValues = { firstname: "", lastname: "", address: "", country: "", city: ""};
    
        const [formValues, setFormValues] = useState(intialValues);
    
        const handleChange = (e) => {
            console.log(e.target.value);
            const { name, value } = e.target;
            setFormValues({ ...formValues, [name]: value });
        }
    
     
        return (
    
            <Routes>
                <Route path='/' element={
                    <Nav compo={() => <SignUpAdmin data={formValues} change={handleChange} />} />
                } />
                <Route exact path='/profileadmin'
                    render={() =>
                        <Nav compo={() => <ProfileAdmin data={formValues} change={handleChange} />} />
                    }
                />
            </Routes>
    
    
        )
    
    }
    
    
    
    export default AdminData;

here is the first child code signA.js

    import react, { Component, useState, useEffect } from 'react';
    import { NavLink, useNavigate } from 'react-router-dom';
    
    import './sign.css';
    
    const SignA = (props) => {
    
        const navigate = useNavigate();
    
        const [formErrors, setFormErrors] = useState({});
        const [isSubmit, setIsSubmit] = useState(false);
    
    
        const handleSubmit = (err) => {
            err.preventDefault();
            setFormErrors(validate(props.data));
            //props.updateParentState(props.data);
            setIsSubmit(true);
        }
    
    
        useEffect(() => {
            console.log(props.data)
            console.log(formErrors);
            console.log(Object.keys(formErrors).length);
            if (Object.keys(formErrors).length === 0 && isSubmit) {
                console.log(props.data);
                if (isSubmit) {
                    return (navigate('/profileadmin'))
                }
    
            }
        }, [formErrors])
    
        const validate = (values) => {
            const errors = {};
            const regex = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/i;
    
            if (!values.firstname) {
                errors.firstname = 'firstname is required!';
            }
            if (!values.lastname) {
                errors.lastname = 'lastname is required!';
           }
            return errors;
        }
    
       
        return (
    
<div className='signup'>
                <form onSubmit={handleSubmit} >
                    <div className="container">
                        <h1>Sign Up</h1>
                        <div className="name">
                            <div>
                                <input
                                    type="text"
                                    placeholder="First name"
                                    name="firstname"
                                    id='firstName'
                                    value={props.data.firstname}
                                    onChange={props.change}
                                />
                            </div>
                            <div>
                                <input
                                    type="text"
                                    placeholder="Last name"
                                    name="lastname"
                                    value={props.data.lastname}
                                    onChange={props.change}
                                />
                            </div>
                        </div>
                        <p className='errorMsg'>{formErrors.firstname}</p>
                        <p className='errorMsg'>{formErrors.lastname}</p>
                        <br />
                        <div className="clearfix">
                            <button type="submit" className="signupbtn">Sign Up</button>
                        </div>
                    </div>
                </form >
</div >
        )
    }
    
    
    export default SignA;

the code of the second child profileA.js

    import react, { useState, useEffect } from "react";
    
    
    import './profileA.css'
    
    const ProfileA = (props) => {
    
        const [profileAErrors, setProfileAErrors] = useState({});
        const [isSubmit, setIsSubmit] = useState(false);
    
        const handleSubmit = (err) => {
            err.preventDefault();
            setProfileAErrors(validate(props.data));
            setIsSubmit(true);
        }
    
        useEffect(() => {
            console.log(props.data);
    
            if (Object.keys(profileAErrors).length === 0 && isSubmit) {
                console.log(props.data);
            }
        }, [profileAErrors])
    
        const validate = (values) => {
            const errors = {};
    
           
            if (!values.address) {
                errors.address = 'address is required!';
            }
            if (!values.country) {
                errors.country = 'country is required!';
            }
            if (!values.city) {
                errors.city = 'city is required!';
            }
            return errors;
        }
    
    
        return (
<div className="a_profileA">
                <h1>Profile</h1>
                <form onSubmit={handleSubmit}>
                    <div className="a_container">
                         <input
                            type="text"
                            name="address"
                            placeholder='Address'
                            value={props.data.address}
                            onChange={props.change}
                        />
                        <p className='errorMsg'>{profileAErrors.address}</p>
    
                        <br />
                        <div className="a_where">
    
                            <input
                                type="text"
                                name="country"
                                id="country"
                                placeholder='Country'
                                value={props.data.country}
                                onChange={props.change}
                            />
    
                            <input
                                type="text"
                                name="city"
                                id="city"
                                placeholder='City'
                                value={props.data.city}
                                onChange={props.change}
    
                            />
                        </div>
                        <p className='errorMsg'>{profileAErrors.country}</p>
                        <p className='errorMsg'>{profileAErrors.city}</p>
    
                        <div className="a_clearfix">
                            <button type="submit" className="a_start">Start Your Journy</button>
                        </div>
                    </div>
                </form >
</div >
        )
    }
    
    export default ProfileA;

the app.js

    import react, { Component } from 'react';
    import { BrowserRouter, Route, Routes } from 'react-router-dom';
    
    
    import AdminUser from './components/pages/adminUser';
    import ProfileAdmin from './components/pages/profileAdmin';
    import AdminData from './components/flow/adminData';
    
    const App = () => {
    
      return (
    
<BrowserRouter>
    
          <Routes>
            <Route path='/' element={<AdminUser />} />
            <Route exact path='/admindata/*' element={<AdminData />} />
            <Route exact path='/profileadmin' element={<ProfileAdmin />} />
          </Routes>
    
</BrowserRouter>
      )
    
    }
    
    
    
    export default App;

this is the error I get in the console when the second child component is rendered

profileA.js:82 Uncaught TypeError: Cannot read properties of undefined (reading 'address')
at ProfileA (profileA.js:82:1)
at renderWithHooks (react-dom.development.js:14985:1)
at mountIndeterminateComponent (react-dom.development.js:17811:1)
at beginWork (react-dom.development.js:19049:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
at beginWork$1 (react-dom.development.js:23964:1)
at performUnitOfWork (react-dom.development.js:22776:1)
at workLoopSync (react-dom.development.js:22707:1)