Dynamically load image by name

I am learning. I'm doing a delivery layout.I reached a part where I need to load Cards with the restaurants, the names are going correctly, but I can't place the images.I'm using a JSON file, with a 'restaurants' type, containing id, name, image.

File structure:

/|--/src     |--/App     |    |--index.tsx     |--/components     |    |--/restaurants     |         |--index.tsx     |         |--/restaurantCard     |              |--index.tsx     |--/assets          |--/restaurants               |--all images png

RestaurantCard Component:

import { View, Text, Pressable, Image } from 'react-native'import { RestaurantsProps } from '..'import { FontAwesome, Ionicons } from '@expo/vector-icons'export default function RestaurantCard({ item }: { item: RestaurantsProps }) {    const width = 140;     const height = 100;    // This line works    const Logo = Image.resolveAssetSource(require(`@/src/assets/restaurants/kfc.png`)).uri    // This dont works    // const Logo = Image.resolveAssetSource(require(`@/src/assets/restaurants/${item.image}`)).uri    return (<Pressable style={{            marginVertical: 4,            justifyContent: 'center',            alignItems: 'center',            backgroundColor: '#c8c8c8',            borderRadius: 16,        }}            onPress={() => { console.log(`CLICOU EM ${item.name}`) }}><View style={{                width: width,                height: height,                backgroundColor: 'black',                borderRadius: 16,            }}><Image source={{uri: Logo}} style={{                    width: width,                    height: height,                    resizeMode: 'stretch',                    borderRadius: 16,                }} /></View><FontAwesome name='circle' size={38} color={'#aaa'} style={{                position: 'absolute',                bottom: 26,            }} /><Ionicons name='fast-food-outline' size={24} style={{                position: 'absolute',                bottom: 32,                color: '#ddd'            }} /><Text className='font-semibold text-gray-600 text-lg mt-5'>{item.name}</Text></Pressable>    )}

Restaurant list component:

import { useEffect, useState } from 'react'import { View, FlatList } from 'react-native'import RestaurantCard from './restaurantCard';import * as restaurantesJson from '@/db.json'export interface RestaurantsProps {    id: string;    name: string;    image: string}export function Restaurants({ urlFetch }: { urlFetch: string }) {    const [restaurants, setRestaurants] = useState<RestaurantsProps[]>([])    useEffect(() => {        //This async function was an attempt, but nothing changed        async function getRestaurantsJson() {            // console.log(data);            setRestaurants(restaurantesJson.restaurants);             console.log(restaurants);        }        getRestaurantsJson()    }, []);    return (<View><FlatList                horizontal={true}                data={restaurants}                renderItem={({ item }) => <RestaurantCard item={item} />}                showsHorizontalScrollIndicator={false}                contentContainerStyle={{                    gap: 12,                    justifyContent: 'center',                    alignItems: "center"                }}            /></View>    )}

I don't know what I have to do

I need an solution that loads the images automatically, without needing me to create a file exporting them all.