Cannot See File Type Icon in Document Card from the Fabruic UI-React

O365Developer 

That src in my link will show the Default PowerPoint logo for every single card, and i don't want that. i want the correct logo to appear, for whatever the document type happens to be. if its excel, show the excel icon. if its, Power BI, show me the .pbix icon.  here is essentially all of the code that contains anything to do with the document card. 

here is what i have for iconSrc. it is also in the main code chunk below, underneath the previewImageSrc.

iconSrc: `${DocIcon.toString() == `pbix` ? `https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/powerbi.svg?v6` : `https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/${DocIcon}.svg?v6`}`,

The iconSrc is an If condition because the Power BI does not follow the same naming convention as all of the rest. As far as i can tell (with my limited 10 item test document library) i have the icons src correct. That's why when i go into google chrome, the ONLY thing i do is add width:25% and it pops up just right. 

import {
  DocumentCard,
  IDocumentCardStyles,//might delete this?
  DocumentCardActivity,
  DocumentCardPreview,
  DocumentCardTitle,
  IDocumentCardPreviewProps,
  DocumentCardImage,
  DocumentCardDetails,
  DocumentCardType,
  IDocumentCardActivityPerson
  } from 'office-ui-fabric-react/lib/DocumentCard';
  import { ImageFit} from 'office-ui-fabric-react/lib/Image';
  import { FontWeights, FontSizes} from 'office-ui-fabric-react/lib/Styling';
  import { Text } from 'office-ui-fabric-react/lib/Text';
  import { FileTypeIcon, ApplicationType, IconType, ImageSize } from "@pnp/spfx-controls-react/lib/FileTypeIcon"



initializeIcons(/* optional base url */);

const ItemDetail = ({
    id, FileLeafRef, DocIcon, FileRef, siteUrl, listID, UniqueId, FirstUniqueAncestorSecurableObject, FieldValuesAsTextEditor, itemAuthor, siteServerRelativeUrl, authorEmail,
    Created, ServerRedirectedEmbedUrl, lastEdited, fileSize, DisplayFields, ListName
 }) => {
    const previewProps: IDocumentCardPreviewProps = {
        previewImages: [
          {
            name: {FileLeafRef}.toString(),
            linkProps: {
              href:'www.google.com',
              target: 'www.google.com'
            },
            previewImageSrc:`${siteUrl.toString().split('/teams',0)}/_api/v2.1/sites/${ siteUrl.split('/KTest',0).toString().split('https://',0) },${listID},${FirstUniqueAncestorSecurableObject}/items/${UniqueId}/driveItem/thumbnails/0/c400x99999/content?preferNoRedirect=true&clientType=modernWebPart`,
            iconSrc: `${DocIcon.toString() == `pbix` ? `https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/powerbi.svg?v6` : `https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/${DocIcon}.svg?v6`}`,
            imageFit: ImageFit.contain,
            width: 200,
            height: 200,
          }
        ]
      };
 // ********************I DONT KNOW WHY THIS WORKS BUT IT DOES -------- ITS SOMETHING TO LOOK INTO FOR EDITING THE CSS OF THESE COMPONENTS*************
      const boldStyle = {
        root:[ { 
          fontWeight: FontWeights.semibold,
          fontSize: FontSizes.xLarge
        }
        ]
      };
      

    return(
      <DocumentCard
        aria-label="Versatile Document Library Created By Kyle Johnston."
        onClickHref={ServerRedirectedEmbedUrl.toString().length > 0 ? ServerRedirectedEmbedUrl : `${siteUrl.toString().split('/teams',0)}/_api/v2.1/sites/${ siteUrl.split('/KTest',0).toString().split('https://',0) },${listID},${FirstUniqueAncestorSecurableObject}/items/${UniqueId}/driveItem/thumbnails/0/c400x99999/content?preferNoRedirect=true&clientType=modernWebPart`               }
      >

      {DisplayFields.toString().includes("ShowTitle") ? <DocumentCardTitle 
        styles={boldStyle} /*<<<<<<BOLDSTYLE APPLYING CSS EDITS*/
        title={FileLeafRef.toString()}
        shouldTruncate={true}/>:""}
      {DisplayFields.toString().includes("ShowPreview") ? <DocumentCardPreview     {...previewProps}/>   :""}
      {DisplayFields.toString().includes("ShowActivity") ? <div><DocumentCardActivity 
        activity={`Created: ${Created.toString().substr(5,2)}/${Created.toString().substr(8,2)}/${Created.toString().substr(0,4)}`}
        people={[{ 
          name:itemAuthor, 
          profileImageSrc: `${siteUrl}/_layouts/15/userphoto.aspx?size=S&accountname=${authorEmail}`  
        }]}
        /></div>: ""}
      {DisplayFields.toString().includes("ShowCreatedBy") ? <Text> Created By: <Text>{itemAuthor}<br></br></Text></Text> : ""}
      {DisplayFields.toString().includes("ShowCreatedOn") ? <Text> Created On: <Text>{Created.toString().substr(5,2)}/{Created.toString().substr(8,2)}/{Created.toString().substr(0,4)}<br></br></Text></Text>: ""}
      {DisplayFields.toString().includes("ShowEditedBy") ? <Text> Last Edited By: <Text>{FieldValuesAsTextEditor}<br></br></Text></Text>: ""}
      {DisplayFields.toString().includes("ShowEditedOn") ? <Text> Last Edited On: <Text>{lastEdited}<br></br></Text></Text>: ""}
      {DisplayFields.toString().includes("ShowFileType") ? <Text> File Type: <Text>{DocIcon}<br></br></Text></Text>: ""}
      {DisplayFields.toString().includes("ShowFileSize") ? <Text> File Size: <Text>{(fileSize/1000).toFixed(2)} KB<br></br></Text></Text>: ""}
      
      <FileTypeIcon type={IconType.image} path={siteUrl+FileLeafRef} size={ImageSize.large} />
      </DocumentCard>
    );
  };
export default ItemDetail;