Text will not populate in React Grid - reactjs

Question

I am trying to create 4 react panels using Grid to showcase my skills for my Portfolio application. My text was working fine but, once I tried to implement a custom Paper Grid from material UI the text is being overridden somehow and I'm not sure why.
Here is my code where I declare the custom Grid:
import React from "react";
import { makeStyles} from "#material-ui/core/styles";
import Grid from "#material-ui/core/Grid";
import Paper from "#material-ui/core/Paper";
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
color:'green',
},
paper: {
height: 150,
width: 100
},
}));
const SpacingGrid = () => {
const [spacing] = React.useState(2);
const classes = useStyles();
return (
<theme>
<Grid container className={classes.root} spacing={2}>
<Grid item xs={12}>
<Grid container justify="center" spacing={spacing}>
<Paper className={classes.paper} />
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<Paper className={classes.control}>
<Grid container>
<Grid item></Grid>
</Grid>
</Paper>
</Grid>
</theme>
);
};
export default SpacingGrid;
Here is my code where I call the Grid and use it to implement my skills:
import React from 'react'
import Panel from '../accessories/Panels'
import SpacingGrid from '../accessories/Grid'
const frontEnd =['Django','Reactjs','Javascript','HTML','CSS']
const backEnd =['Python','Typescript','Nodejs','Express']
const databases =['MongoDB','MySQL']
const tools = ['AWS','AWS-CDK','Docker','AWS-Lambda','Figma','Microservices','Kubernetes']
//I should probably make my own styled components for this but NEED to learn how
const Skills = () =>{
return(
<div>
<h1 color="whitePrimary" align="center">
Skills
</h1>
<SpacingGrid>
<Panel flexWidth="25" padding="1" rounded>
<h1 color="whitePrimary" align="center">
Front-End
</h1>
<p color="whitePrimary" align="center">
</p>
{frontEnd.map((item) =>(
<p color="textPrimary" align="center" key={item}>
{item}
</p>
))}
</Panel>
<Panel flexWidth="31" padding="1" rounded>
<h1 color="whitePrimary" align="center">
Back-End
</h1>
<p color="whitePrimary" align="center">
</p>
{backEnd.map((item) => (
<p color="textPrimary" align="center" key={item}>
{item}
</p>
))}
</Panel>
<Panel flexWidth="31" padding="1" rounded>
<h1 color="whitePrimary" align="center">
Databases:
</h1>
<p color="whitePrimary" align="center">
</p>
{databases.map(((item) =>(
<p color="textPrimary" align="center" key={item}>
{item}
</p>
)))}
</Panel>
<Panel flexWidth="31" padding="1" rounded>
<h1 color="whitePrimary" align="center">
General Tooling:
</h1>
<p color="whitePrimary" align="center">
</p>
{tools.map((item => (
<p color="textPrimary" align="center" key={item}>
{item}
</p>
)))}
</Panel>
</SpacingGrid>
</div>
)
}
export default Skills;
Here is my App.js my file were all the components sit:
import {React, Suspense} from 'react'
import SocialFooter from '../components/SocialMediaFooter'
import Header from '../components/Header'
import Skills from '../components/SkillsPanels'
const Main = () =>{
return(
<div>
<Suspense fallback={<div>Loading...</div>}>
<Header />
</Suspense>
<Suspense fallback={<div>Loading...</div>}>
<Skills />
</Suspense>
<Suspense fallback={<div>Loading... </div>}>
<SocialFooter />
</Suspense>
</div>
)}
//add all react components here and export to app.js
export default Main;
My issue is that I believe the error to be in the Grid.js file. Now the code works but, it does not add the text to the app as I have it in SkillsPanels.js it just gives me blank Grids which leaves me stumped. Thank you all!

Answer 1

I passed props in the SpacingGrid function and then called {props.children} next to