Изображение не отображается в реакции js с использованием require.context

Я пытался найти ответ, но я ничего не получаю, чтобы решить эту проблему. Я загружаю свое изображение с помощью require.context, как вы можете видеть в коде, но оно не загружается. Раньше он отлично работал в предыдущих версиях react js. Сейчас я использую версию реакции 17.0.1. В консоли ошибок нет. Если я импортирую изображение и использую его в src, все работает нормально. Я также попытался изменить изображения с некоторыми предыдущими изображениями, использованными в предыдущих проектах (с использованием версии 16.x.x), которые там работают нормально. Я создаю приложение для реагирования, используя npx-create-react-app. Путь к изображению правильный, так как в случае неправильного пути "модуль с именем xxx не найден, возникает ошибка". Текущее поведение: Изображение не отображается, вместо него отображается значение alt. Желаемое поведение: Изображение должно отображаться вместо значения alt.

import React, { Component } from "react";
import commonStyles from "../css/common.module.css";
import loginStyles from "../css/login.module.css";
import { TextField, Button, Paper, Typography } from "@material-ui/core";

class Login extends Component {
  state = {
    userName: "",
    password: "",
    error: "",
  };
  render() {
    const images = require.context("../images", true);
    return (
      <div
        className = {`${loginStyles.root} d-flex justify-content-center align-items-center ${commonStyles.bg}`}
      >
        <Paper
          classes = {{
            root: `${commonStyles.paper} mt-2`,
          }}
          elevation = {3}
        >
          <div className = {`${loginStyles.child}`}>
            <div className = {`d-flex justify-content-center align-items-center`}>
              <img
                src = {images(`./Shahmeer.png`)}
                alt = {`Shahmeer Avenue Logo`}
                width = "100"
                height = "100"
              />
            </div>
            <Typography
              classes = {{
                root: `font-weight-bold`,
              }}
              variant = "h5"
              gutterBottom
            >
              Login
            </Typography>
            <form noValidate autoComplete = "off">
              <TextField
                classes = {{
                  root: `${commonStyles.textField}`,
                }}
                onChange = {(e) => this.handleChangeEvent(e)}
                id = {"userName"}
                label = {"User Name"}
                variant = "outlined"
                error = {this.state.error ? true : false}
                helperText = {this.state.error}
                value = {this.state["userName"]}
              />
              <TextField
                classes = {{
                  root: `${commonStyles.textField}`,
                }}
                onChange = {(e) => this.handleChangeEvent(e)}
                id = {"password"}
                label = {"Password"}
                variant = "outlined"
                error = {this.state.error ? true : false}
                helperText = {this.state.error}
                value = {this.state["password"]}
              />
              <div className = {`w-100 d-flex justify-content-end mt-2`}>
                <Button variant = "contained" color = "primary">
                  Login
                </Button>
              </div>
            </form>
          </div>
        </Paper>
      </div>
    );
  }
}

export default Login;

снимок браузера: