как импортировать массив в react компонент (массив с имена картинок, которые считываю с директории)

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

const fs = require('fs');
const path = require('path');


const PictureObjectCreator = (pathTo) =>  {
  let arrayOut = []
  let allFiles = fs.readdirSync(pathTo)


  for (let i = 0 ; i < allFiles.length ; i+=1){
    allFiles[i] = path.basename(allFiles[i] , '.webp');
    allFiles[i] = allFiles[i].split('_').join(' ')
    arrayOut[i] = {name: allFiles[i] , value: allFiles[i]}
  }

  return arrayOut
}


let gameMode3Path = '../../images/imageForGameMode3'

const gameMode1Select = PictureObjectCreator(gameMode1Path);
const LCEGOList = PictureObjectCreator(gameMode3Path);

exports.LCEGOList = LCEGOList

вот тут у меня получилось вывести полученный массив

const List = require('./LCDirectoryFileNameReader')
const LCEGOList = List.LCEGOList

console.log(LCEGOList);

но при импорте его в браузере выползает вот такая ошибка

Uncaught TypeError: fs.readdirSync is not a function

подскажите как с ней справится, буду премного благодарен

пробовал импортировать массив в реакт так

const List = require('./LCDirectoryFileNameReader')
const LCEGOList = List.LCEGOList

и так

import { LCEGOList } from "../../LCDitectoryFileNameReader/test";

но в любом случае получал ошибку