Grid gallery photos not showing in React js project How do I fix this

Question

So I am building a React web page and implementing a grid gallery, the photo placeholders are there when inspect element but no photos? I checked the photos elsewhere on the page and they work fine just not working inside the grid for some reason. However the loadmore icon is displaying just fine, could this be the size of my photos don't fit in the grid? If this is the case what size should they be to properly work? How do I fix this TIA

Imported all necc. photo files. Set up my grid Im at a loss

    import React from 'react'
import styled from 'styled-components';
import loadmore from 'images/loadmore.png';
import salon1 from 'images/salon1.jpg';
import home from 'images/home.jpg';



function Portfolio() {
  return (
    <Section id = "portfolio">
      <div className = "grid">

        <div className = "child-one grid-box"></div>
        <div className = "child-two grid-box"></div>
        <div className = "child-three grid-box"></div>
        <div className = "child-four grid-box"></div>
        <div className = "child-five grid-box"></div>
        <div className = "child-six grid-box"></div>
        <div className = "child-seven grid-box"></div>
        <div className = "child-eight grid-box"></div>
        <div className = "child-nine grid-box"></div>
        <div className = "child-ten grid-box"></div>
        <div className = "child-eleven grid-box"></div>
     </div>
     <div className="portfolio-more">
       <span id='loadmore'> Load More</span>
       <img src={loadmore} alt= 'load more'/>
     </div>

    </Section>
  );
}

const Section = styled.section`
min-height: 100vh;
padding-bottom: 2rem;
background-color: var(--secondary-color);
 .grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-areas:
   "one one two two"
   "one one three four"
   "five six seven seven"
   "eight six seven seven";
   .grid-box {
     height: 15rem;
     width: 100%;
     cursor: pointer;
     &:nth-of-type (1) {
       grid-area: one;
       background: url(${home}) no-repeat right center;
       background-size: cover;
     }
     &:nth-of-type (2) {
      grid-area: two;
      background: url(${salon1}) no-repeat right center;
      background-size: cover;
    }
    &:nth-of-type (3) {
      grid-area: three;
      background: url(${salon1}) no-repeat right center;
      background-size: cover;
    }
    &:nth-of-type (4) {
      grid-area: four;
      background: url(${home}) no-repeat right center;
      background-size: cover;
    }
    &:nth-of-type (5) {
      grid-area: five;
      background: url(${home}) no-repeat right center;
      background-size: cover;
    }
    &:nth-of-type (6) {
      grid-area: six;
      background: url(${home}) no-repeat right center;
      background-size: cover;
    }
    &:nth-of-type (7) {
      grid-area: seven;
      background: url(${home}) no-repeat right center;
      background-size: cover;
    }
    &:nth-of-type (8) {
      grid-area: eight;
      background: url(${home}) no-repeat right center;
      background-size: cover;
    }
    &:nth-of-type (9) {
      grid-area: nine;
      background: url(${home}) no-repeat right center;
      background-size: cover;
    }
    &:nth-of-type (10) {
      grid-area: ten;
      background: url(${home}) no-repeat right center;
      background-size: cover;
    }
    &:nth-of-type (11) {
      grid-area: eleven;
      background: url(${home}) no-repeat right center;
      background-size: cover;
    }
  
   }


 }
`;

export default Portfolio