Импорт статических файлов react

Есть проект на ts, создал используя cra. Использую для стилей библиотеку vanilla-extract и по инструкции добавил craco с использованием @vanilla-extract/webpack-plugin. Встала задача импортировать статические файлы (пока что svg и jpg). Перепробовал разные методы описанные тут, тут и на других ресурсах. Самые очевидные варианты:

import image from './img/CloseIcon.svg';
import image1 from './img/first.jpg';

Дают ошибку того, что это не ts модули: Не удается найти модуль "./img/first.jpg" или связанные с ним объявления типов. Варианты с использованием require(...) - аналогично.

Единственное решение которое я смог найти следующее: в src создал папку types с файлом custom.d.ts содержимое следующее:

declare module '*.svg' {
    import * as React from 'react';

    export const ReactComponent: React.FunctionComponent<
        React.SVGProps<SVGSVGElement> & { title?: string }
    >;

    const src: string;
    export default src;
}

declare module '*.jpg' {
    const src: string;
    export default src;
}

В файл tsconfig.json добавил следующее: "typeRoots": ["node_modules/@types", "src/types"] Теперь импорт изображений работает:

import image from './img/CloseIcon.svg'; //работает
const image1 = require('./img/first.jpg') as string; //работает
const image2: string = require('./img/CloseIcon.svg').default; //работает
import image3 from './img/first.jpg'; //работает
const image4: string = require('./img/first.jpg').default; //не работает

Это не сильно критично, хотя непонятно почему последняя запись не работает, т.е. файл не загружается.

Вопрос в том как правильно нужно подключать аналогичные статические файлы без написания собственных типов