Semantic UI in react: itemsPerRow={x} not working

Question

First post, so I apologize if this lacks clarity, and very green programmer, so apologize for any ugly syntax. But I cannot, for the life of me, get itemsPerRow to actually assign semantic ui cards into rows. No matter what I do, I get 1 big column extending down the page.

Projects is a parent to ProjectCard, the .map function is working, and each individual card has all the right data. But I have 1 column of 10 cards. I've commented out my entire CSS file, I've removed every div, I've tried adding new parent div's, and I've tried flex-box. I've tried hard coding the "first" card by moving the code from ProjectCard into Projects, and I've tried moving the <Card.Group> tags into ProjectCard. I eventually defaulted to chatGPT, but even that gave up.

Projects.js:

import React from "react";
import {Card} from "semantic-ui-react"
import {useEffect, useState} from "react"
import ProjectCard from "./ProjectCard";

function Projects() {

    const [projects, setProjects] = useState([])

    useEffect(() => {
        fetch("http://localhost:3001/projects")
        .then(r => r.json())
        .then(data => setProjects(data))
    } ,[])

    const eachProject = projects.map((project) => ( 
        <ProjectCard key = {project.id}
                    id = {project.id}
                    name = {project.name}
                    image = {project.image}
                    description = {project.description}
                    />
    ));
    
    return ( 
        <div className="project-list">
            <h1 className="project-header" style={{textAlign: "center"}}>Projects Title</h1>
            <Card.Group itemsPerRow={4}>
                {eachProject}
            </Card.Group>  
        </div>
    )
}

export default Projects;

ProjectCard.js:

import React from "react";
import { Card } from "semantic-ui-react";

function ProjectCard({id, name, image, description}) {

    return (
        
        <Card style={{
                boxShadow: "5px 3px 3px rgb(54, 29, 29)",
                }}>
            <div className="project-card">
                <div className="image-container">
                    <img src = {image} alt={name} style={{width: "10%", height: "auto"}}/>
                </div>
                <div className="card-content">
                    <div className="card-header">{name}</div>
                    <p className="card__text">{description}</p>
                    <button className="go-button">Go to Project</button>
                </div>
            </div>
        </Card>
    )
}

export default ProjectCard;```