Где ошибка в пути? Почему не открывается картинка?

Есть компонент с формой Form

import React, { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import Card from './Card.js';

function UserInfo() {
  const [name, setName] = useState('');
  const [sex, setSex] = useState('');
  const [holiday, setHoliday] = useState('');
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  return (
    <div>
      {!submitted ? (
        <Form onSubmit={handleSubmit}>
          (моя форма)
          <Button variant="primary" type="submit">
            Создать
          </Button>
        </Form>
      ) : (
        <Card name={name} sex={sex} holiday={holiday} />
      )}
    </div>
  );
}

export default UserInfo;

есть компонент на который переключается страница после нажатия кнопки Создать, Card.js

import React from 'react';

const ImageOverlay = ({ name, sex, holiday }) => {
  const imagePath = `./userName/${sex}/${holiday}/image.jpg`;
  return (
    <div>
      <h2>{name}</h2>
      <img src={imagePath} alt={name} />
    </div>
  );
}

export default ImageOverlay;

и компонент App

import './App.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import React, { useState } from 'react';
import UserInfo from './components/Form.js';
import ImageOverlay from './components/Card.js';

const App = () => {
  const [formData, setFormData] = useState({ name: '', sex: '', holiday: '' });
  const handleFormData = (data) => {
    setFormData(data);
  };

  return (
    <div className='App'>
      <div className='App-form'>
      <UserInfo onFormData={handleFormData} />
      </div>
      <ImageOverlay name={formData.name} sex={formData.sex} holiday={formData.holiday} />
    </div>
  );
}

export default App;

почему не открывается картинка в компоненте Card.js?