import images from props array no-unused-vars

Question

I want this react component to show the navigation images based on a string array that's passed in as props. But my linter is blowing up

  Line 4:8:   'home' is defined but never used      no-unused-vars
  Line 5:8:   'menu' is defined but never used      no-unused-vars
  Line 6:8:   'bookings' is defined but never used  no-unused-vars
  Line 7:8:   'stock' is defined but never used     no-unused-vars
  Line 8:8:   'orders' is defined but never used    no-unused-vars
  Line 9:8:   'profile' is defined but never used   no-unused-vars
  Line 10:8:  'logout' is defined but never used    no-unused-vars

Is there some way to only import the images that are passed in on props and satisfy the linter?

import home from '../images/home.svg';
import menu from '../images/menu.svg';
import bookings from '../images/bookings.svg';
import stock from '../images/stock.svg';
import orders from '../images/orders.svg';
import profile from '../images/profile.svg';
import logout from '../images/logout.svg';

interface IProps {
  navItems: string[];
}

function Nav({ navItems }: IProps) {
  return (
    <div className='Nav'>
      {navItems.map((item, index) => {
        return <img src={item} id={String(index)} />;
      })}
    </div>
  );
}

export { Nav };

The navItems array looks like the below and maps to the image names exactly

  const navItems = [
    'home',
    'menu',
    'bookings',
    'stock',
    'orders',
    'profile',
    'logout',
  ];
  <Nav navItems={navItems} />

my eslint file...

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "prettier"],
  "extends": ["eslint:recommended", "google", "prettier"],
  "rules": {
    "prettier/prettier": 2,
    "require-jsdoc": 0,
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": ["error"]
  }
}

I've also tried this craziness but my typings are wrong

import { useHistory } from 'react-router-dom';

import home from '../images/home.svg';
import menu from '../images/menu.svg';
import bookings from '../images/bookings.svg';
import reports from '../images/stock.svg';
import refunds from '../images/orders.svg';
import profile from '../images/profile.svg';
import logout from '../images/logout.svg';


interface PropsShape {
  navItems: string[];
}

interface ImagesShape {
  home: ImageData;
  menu: ImageData;
  bookings: ImageData;
  reports: ImageData;
  refunds: ImageData;
  profile: ImageData;
  logout: ImageData;
}

function Nav({ navItems }: PropsShape) {
  const history = useHistory<History>();
  const navImages: ImagesShape = [
    { home },
    { menu },
    { bookings },
    { reports },
    { refunds },
    { profile },
    { logout },
  ];
  return (
    <div className='Nav'>
      {navItems.map((item, index) => {
        return (
          <img
            src={navImages[item]}
            id={String(index)}
            onClick={() => history.push(`/${item}`)}
            alt={item}
          />
        );
      })}
    </div>
  );
}

export { Nav };