the following is my code:
import { Box, Typography, styled } from "@mui/material";
import CustomerProfile from "./components/CustomerProfile";
import InfoCard from "./components/InfoCard";
import FeedIcon from "@mui/icons-material/Feed";
import LocationOnIcon from "@mui/icons-material/LocationOn";
import AccountCircleIcon from "@mui/icons-material/AccountCircle";

const Container = styled(Box)(({ theme }) => ({
  display: "flex",
  flexDirection: "column",
  padding: theme.spacing(4),
  gap: theme.spacing(4),
}));

const InfoCardContainer = styled(Box)(({ theme }) => ({
  display: "flex",
  width: "100%",
  gap: theme.spacing(4),
}));

const ContentContainer = styled(Box)(({ theme }) => ({
  display: "flex",
  justifyContent: "space-around",
  gap: theme.spacing(2),
  padding: theme.spacing(4),
}));

const ContentColumn = styled(Box)(({ theme }) => ({
  flex: 1,
  display: "flex",
  flexDirection: "column",
  gap: theme.spacing(1),
}));

const ContentTitle = styled(Typography)({
  color: "#8f9daf",
});

const ContentSubtitle = styled(Typography)(
  ({ theme, green = false, red = false }) => ({
    color: green ? "#41beb0" : red ? "#ff7a7d" : theme.palette.primary.main,
    fontWeight: "bold",
  })
);

const EmploymentInformation = () => {
  return (
    <ContentContainer>
      <ContentColumn>
        <ContentTitle>Occupation:</ContentTitle>
        <ContentSubtitle>Office Administration</ContentSubtitle>
        <ContentTitle>Approved Employer:</ContentTitle>
        <ContentSubtitle green>Yes</ContentSubtitle>
        <ContentTitle>Salary Transferred:</ContentTitle>
        <ContentSubtitle red>No</ContentSubtitle>
      </ContentColumn>
      <ContentColumn>
        <ContentTitle>Organization:</ContentTitle>
        <ContentSubtitle>KFMC</ContentSubtitle>
        <ContentTitle>Place:</ContentTitle>
        <ContentSubtitle>Riyadh</ContentSubtitle>
      </ContentColumn>
    </ContentContainer>
  );
};

const AddressInformation = () => {
  return (
    <ContentContainer>
      <ContentColumn>
        <ContentTitle>Street:</ContentTitle>
        <ContentSubtitle>Ahmed bin Khaled St.</ContentSubtitle>
        <ContentTitle>Building No.</ContentTitle>
        <ContentSubtitle>1234</ContentSubtitle>
        <ContentTitle>City:</ContentTitle>
        <ContentSubtitle>Riyadh</ContentSubtitle>
      </ContentColumn>
      <ContentColumn>
        <ContentTitle>District:</ContentTitle>
        <ContentSubtitle>Al-Olaya</ContentSubtitle>
        <ContentTitle>Secondary No.</ContentTitle>
        <ContentSubtitle>Riyadh</ContentSubtitle>
        <ContentTitle>Postal Code:</ContentTitle>
        <ContentSubtitle>11452</ContentSubtitle>
      </ContentColumn>
    </ContentContainer>
  );
};

const IdInformation = () => {
  return (
    <ContentContainer>
      <ContentColumn>
        <ContentTitle>ID Type:</ContentTitle>
        <ContentSubtitle>Saudi ID</ContentSubtitle>
        <ContentTitle>Date of Birth:</ContentTitle>
        <ContentSubtitle>15, June 1996</ContentSubtitle>
      </ContentColumn>
      <ContentColumn>
        <ContentTitle>ID Number:</ContentTitle>
        <ContentSubtitle>1091182301</ContentSubtitle>
        <ContentTitle>Date of Expiry:</ContentTitle>
        <ContentSubtitle>30, Dec 2025</ContentSubtitle>
      </ContentColumn>
    </ContentContainer>
  );
};

const employmentInfo = {
  title: "Employment Information",
  icon: <FeedIcon color="white" />,
  content: <EmploymentInformation />,
};

const addressInfo = {
  title: "Address Information",
  icon: <LocationOnIcon color="white" />,
  content: <AddressInformation />,
};

const idInfo = {
  title: "ID Information",
  icon: <AccountCircleIcon color="white" />,
  content: <IdInformation />,
};

const Home = () => {
  return (
    <Container>
      <CustomerProfile />
      <InfoCardContainer>
        <InfoCard info={employmentInfo} />
        <InfoCard info={addressInfo} />
        <InfoCard info={idInfo} />
      </InfoCardContainer>
    </Container>
  );
};

export default Home;

The following is the error: Warning: Received `true` for a non-boolean attribute `green`.
Can you please edit the code to solve the error?