Problems with props passed to child component

Question

I am having trouble passing props to a child component in my app.

When I navigate to any subject link that which has <PageTemplate />, I get blank page with an error in the console that says: subjects is not iterable. subjects is an array of strings imported from another file as your can see from the code below: -

Here is the code:

Root component

import React from "react";

import Signup from './theQuestionsSteps/signup';
import Home from './home';
import ErrorPage from './pageNotFound';
import {
    Mathematics,
    English,
    Physics,
} from './subjects/subjects';

const RouterComponent = () => {

    return (
         <HashRouter>
             <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/signup" component={Signup} />
                <Route path="/maths" component={Mathematics}></Route>
                <Route path="/english" component={English}></Route>
                <Route path="/physics" component={Physics}></Route>
             </switch>
         </HashRouter>
)

export default RouterComponent;

This is the page header component where I navigate to subject components. Navigating to components that doesn't have the <PageTemplate /> render fine. But the mathematics throws the error I mentioned above.

import {NavLink} from 'react-router-dom';

const HeaderOfCategory = ({subjects}) => {

    const [s1, s2, s3, s4] = subjects;
    const routesVariabele = subjects.map((item) => {
        
        return "/" + item.replace(/\s/, '');
    });

    const [r1, r2, r3, r4] = routesVariabele;
    const styles = { 
        backgroundColor: "green",
        color: "white"
    }

    return (
       <div className="flex flex-row gap-3 w-3/4 mx-auto justify-center">
            <NavLink to={{pathname: r1, subjects}} activeStyle={styles} className="p-3 rounded-lg hover:text-white bg-blue-100 mt-10 hover:bg-green-500 capitalize">{s1}</NavLink>
            <NavLink to={r2} activeStyle={styles} className="p-3 rounded-lg hover:text-white bg-blue-100 mt-10 hover:bg-green-500 capitalize">{s2}</NavLink>
            <NavLink to={r3} activeStyle={styles} className="p-3 rounded-lg hover:text-white bg-blue-100 mt-10 hover:bg-green-500 capitalize">{s3}</NavLink>
            <NavLink to={r4} activeStyle={styles} className="p-3 rounded-lg hover:text-white bg-blue-100 mt-10 hover:bg-green-500 capitalize">{s4}</NavLink>
 </div>

The template component

import HeaderOfCategory from './headerOfCategory';


const PageTemplate = ({children, subjects}) => 
<div>
    <HeaderOfCategory subjects={subjects} />
    {children}
</div>


export default PageTemplate;

The Subjects component

import PageTemplate from '../pageTemplate';



export const Mathematics = ({subjects}) => {

     return (
         <PageTemplate subjects={subjects}><div>I am maths</div></PageTemplate>
     )
}

export const English = () => {

     return (
         <div>I am english</div>
     )
}

export const Physics = () => {

     return (
         <div>I am physics</div>
     )
}

Home page where the user selects subjects of his/her choice. This renders fine.

import React, {useState} from 'react';
import {NavLink} from 'react-router-dom';
import {subjects} from './subjectsList';



const Home = () => {

    const [countSelection, setCountSelection] = useState({four : 0, count : ''});
    const [theInput, setTheInput] = useState([]);

    const handleClick = (e) => {
            setCountSelection({...countSelection, four : countSelection.four + 1});
            if(countSelection.four >= 3){
                setCountSelection({...countSelection, count: 'disabled'});
            }
    }

    const handleChange = (e) => {

        setTheInput([...theInput, e.target.value]);
                    
    }


    return (
        <div className="p-10 w-3/4 mx-auto">
            <div className="p-3 mx-auto">
                <h1 className="text-xl text-gray-500 mx-auto text-center">Select your combination of subjects to begin your exercise</h1>
            </div>
            
    <div  className="flex flex-col w-3/4 mt-8 p-10 mx-auto justify-center shadow-sm shadow-gray-600">
            <p className="mb-5">Note: You can only select Four (4) subjects of your choice</p>
            {subjects.map((item, index) => (
                <div key={index}>
                    <input 
                    type="checkbox" 
                    id={`subject${index}`} value={item} 
                    onChange={handleChange}
                    onClick={handleClick}
                    disabled={countSelection.count}
                    />
                    <label htmlFor="" className="m-5 text-gray-600 capitalize">{item}</label>
                    
                </div>
            
                ))
            }

            {countSelection.count === "disabled" ?<NavLink to={{pathname : "/startPage", theInput}} className="mt-10 w-2/4 p-3 bg-green-500 rounded-lg text-white hover:bg-blue-500 cursor-pointer">Submit</NavLink> : ''}
        </div>

        </div>
    )
}


export default Home;