How to pass className styles to react component

Whenever I try to pass down styles to my Table component through the className prop it breaks and doesn't render either the default styles or the styles passed down. If I do not pass styles down through the className prop, the Table's default styles will show up fine. I have tried joining the strings with interpolation and concatenation with no success. The .join('') method works for multiple styles if the styles are not passed down from another component.

My Table Component

import React from 'react';
import styles from './Table.module.scss';

const Table = ({ 
  children,
  className 
}: { 
  children: React.ReactNode; 
  className?: string 
}) => {
  return <table className={[styles.table, className].join('')}>{children}</table>;
};

The Parent Component

import React from 'react';
import styles from './PaymentTable.module.scss';
import Table '../Table';

interface Props {
  children: React.ReactNode;
}

const PaymentTable: React.FC<Props> = ({ children }) => {
  return (
    <Table className={styles.paymentTable}>
      {children}
    </Table>
  );
};
export default PaymentTable;

The Table Sass File

@use 'shared/styles';

.table {
  border-collapse: separate;
  border-spacing: 0;

  caption,
  th,
  td {
    font-size: styles.em(14);
    line-height: styles.em(17);
  }

  caption,
  th {
    font-weight: 600;
  }

  caption {
    margin-bottom: 8px;
    margin-top: 16px;
    text-align: left;
  }

  th,
  td {
    text-align: center;
  }

  th {
    background-color: styles.color(gray, 95);
    padding: 8px 0px;
  }

  th:first-child {
    border-top-left-radius: 8px;
  }

  th:last-child {
    border-top-right-radius: 8px;
  }

  td {
    border-bottom: 2px solid styles.color(gray, 95);
    font-weight: 400;
    padding: 18px 0px;
  }

  tr td:first-child {
    border-left: 2px solid styles.color(gray, 95);
  }

  tr td:last-child {
    border-right: 2px solid styles.color(gray, 95);
  }

  tr:last-child {
    td:first-child {
      border-bottom-left-radius: 8px;
    }

    td:last-child {
      border-bottom-right-radius: 8px;
    }
  }
}

The Payment Table Sass File

.paymentTable {
  tbody tr {
    cursor: pointer;
  }
}