Image not showing up in react js using require.context

I tried to search for the answer but I am not getting anything to solve it. I am loading my image using require.context as you can see in the code but it's not getting loaded. It used to work perfectly before in previous versions of react js. Now I am using react version 17.0.1. There are no errors in the console. If I import the image and use it in the src it works fine. I have also tried to change the images with some previous images used in previous projects (using react version 16.x.x) which are working fine there. I am creating react app using npx-create-react-app. Path to image is correct as in case of incorrect path "module named xxx not found error occurs". Current behavior: Image not showing up instead alt value is showing up. Desired behavior: Image should show up instead of alt value.

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.handleChange(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.handleChange(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;

snapshot of browser: