reactjs - Facial recognition : Module not found: Error: Can't resolve '.visitors${VisitorName} - Stack Overflow

I am working on a face recognition project. New to Reactjs. I need to upload the image in react app and have to compare the images between newly uploaded image and existing image. While executing code getting error as

Failed to compile.
Module not found: Error: Can't resolve './visitors/${VisitorName}' in 'C:\Users\xxxx\Face recognition\facial-recognition-app\src'  
WARNING in [eslint] 
src\App.js
  Line 8:10:   'VisitorName' is assigned a value but never used  no-unused-vars
  Line 15:11:  Unexpected template string expression             no-template-curly-in-string
  Line 25:32:  Unexpected template string expression             no-template-curly-in-string
  Line 64:25:  Unexpected template string expression             no-template-curly-in-string

ERROR in ./src/App.js 92:11-47
Module not found: Error: Can't resolve './visitors/${VisitorName}' in 'C:\Users\xxxx\Face recognition\facial-recognition-app\src'

webpack compiled with 1 error and 1 warning

When I hover over on 'VisitorName' ie const [visitorName, setVisitorName] = useState('placeholder.jpeg'); in function it is showing 'visitorName' is declared but its value is never read.

Have attached the code and my folder structure screenshot.code

import { useState } from 'react';
import './App.css';
const uuid = require('uuid');

function App() {
  const [image, setImage] = useState('');
  const [uploadResultMessage, setUploadResultMessage] = useState('Please upload an image for authentication!!!');
  const [visitorName, setImgName] = useState('placeholder.jpeg');
  const [isAuth , setAuth] = useState(false);
  
  function sendImage(e){
    e.preventDefault();
    setVisitorName(image.name);
    console.log(setImgName);
    const visitorImageName = uuid.v4();
    fetch("/${visitorImageName}.jpeg",{
      method: 'PUT',
      headers: {
        'Content-Type': 'image/jpeg'
      },
      body: image
    }).then(async () => {
      const response= await authenticate(visitorImageName);
      if (response.Message === 'Success'){
        setAuth(true);
        setUploadResultMessage('Hi ${response[firstname]} ${response[lastname]}. welcome to work.')
      }
      else{
        setAuth(false);
        setUploadResultMessage('Authentication failed. Try Again!!!')
      }
    }).catch(error => {
      setAuth(false);
      setUploadResultMessage('There is an error during the authentication process. Please try again.')
      console.error(error);
    })
  }

  async function authenticate(visitorImageName){
    const requestURL='?'+ new URLSearchParams({
      objectKey: 'S{visitorImageName}.jpeg'
    });
    return await fetch(requestURL,{
      method:'GET',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
        },
    }).then(response=>response.json())
  .then((data) => {
    return data;
  }).catch(error => console.error(error));
  } 
  
  return (
    <div className="App">
      <h2>Welcome to Facial Recognition System</h2>
      <form onSubmit={sendImage}>
        <input type = 'file' name='image' onChange={e => setImage(e.target.files[0])}/>
        <button type ='submit'>Authenticate</button>
      </form>
      <div className={isAuth? 'success':'failure'}> {uploadResultMessage}</div>
      <img src={require('./visitors/${visitorName}')} alt="Visitor" height={250} width={250}/>
    </div>
  );
}

export default App;