Is there a better way to get a document icon image in React apart from this lunacy?

So I have a Fluent UI DetailsList component in a React SPFx web part and I get it to display the icon through this awful code...

constructor(props) {    
    super(props); 
    const columns: IColumn[] = [
      {
        key: 'column1',
        name: 'File Type',
        //className: classNames.fileIconCell,
        //iconClassName: classNames.fileIconHeaderIcon,
        ariaLabel: 'Column operations for File type, Press to sort on File type',
        iconName: 'Page',
        isIconOnly: true,
        fieldName: 'name',
        minWidth: 16,
        maxWidth: 16,
        onColumnClick: this._onColumnClick,
        onRender: (item: IDocument) => {
          //return <img src={item.iconName} className={classNames.fileIconImg} alt={item.fileType + ' file icon'} />;
          return <img src={'https://modernb.akamai.odsp.cdn.office.net/files/fabric-cdn-prod_20210703.001/assets/item-types/20/' + item.DocIcon + '.svg'} alt={item.DocIcon + ' file icon'} width='20' height='20' />;
        },
      },