react-admin: <Show> component elements not rendering when wrapped inside divs

I'm currently working on an admin portal using react-admin, and I've been able to seamlessly style it using MaterialUI, specifically its makeStyles hook. The way I've done it is I'd import my makeStyles file that looks similar to this:

export const detailsView = makeStyles({
  detail: {
    width: "100%",
    "& div": {
      display: "Block",
      visibility: "Visible",
    }
  }
export default detailsView

into my main component, that would hold, for example, a List component like this:

export const ExampleList = (props) => {
  const classes = importedStyles();
  return (
    <>
      <h2 className={classes.tableTitle}>Example Header</h2>
      <List {...props} className={classNames(classes.table)}>
        <Datagrid rowClick="edit">
          <ReferenceField source="id" reference="users" label="Name">
            <FunctionField
              label="Name"
              render={(record) => `${record.first_name} ${record.last_name}`}
            />
          </ReferenceField>
          <TextField source="title"/>
          <DateField source="date" />
        </Datagrid>
      </List>
    </>
  );
};

export default ExampleList;

If I had to wrap my own div that would also hold a section of a TextField, everything still works according to plan. However, this is only the case with the List, Edit, Filter, and Create, however, I'm unable to properly style the Show component.

Prior to adding any styles or wrapping some fields up in a div, this is how it would look like: Notice how the name shows up just fine.

However, when I wrap the Person Details header with the rendered name, as seen below:

 <div className={detailClasses.detailSection}>
          <h3 className={ detailClasses.detailSectionTitle}>Person Details</h3>
          <ReferenceField
            source="id"
            reference="users"
            label="Name"
            className={detailClasses.detailSectionInfo}
          >
            <FunctionField
              render={(record) => `${record.first_name} ${record.last_name}`}
            />
          </ReferenceField>
        </div>

then the information that I want rendered (in this case, the person's name), then it completely stops rendering and doesn't show up on the page.

This hasn't happened with any other react-admin component that I mentioned somewhere above. I was wondering why this is the case, and why it is only happening with the Show component.

Thanks in advance!