Remove the whitespace around an SVG in a React component

Question

I am working in a React Project that displays a scientific instrument. My SVGs currently have whitespace around them so they are located correctly with the other pieces that make up the instrument. When a specific piece is clicked, a popup will appear that contains the SVG of that piece. However, the whitespace around that piece makes the popup SVG appears small and not centered. I need to find a way to remove this whitespace. Live Demo.

I have found multiple ways to remove the whitespace (JSFiddle and StackOverflow)

I believe the primary issue is with my library approach and how I am using it. I am placing the SVG into an <img> tag and using the dictionary to cleanly access the file path.

I have struggled to implement a working version of getBBox() (from the two examples of removing whitespace). Unsure if this is because of React or my ignorance. The primary way I have tried to get the SVG is using fetch(). Possibly there is a way to do this in React cleaner that I am unaware of. I have thought about resorting to adding additional individual SVGs without the whitespace, but thought of trying an approach first that does not involve file duplication (plus the infinite scalability of SVGs makes me feel that would be even more redundant).

Library: (GitHub)

import frm from './svgs/flat-rotatable-mirror.svg';
import globar from './svgs/globar.svg';
import pm from './svgs/parabolic-mirror.svg';
import tungsten from './svgs/tungsten.svg';
import sample from './svgs/sample-compartment.svg';
import dcfrm from './svgs/dc-flat-rotatable-mirror.svg';
import MCT from './svgs/MCT.svg';
import lnsb from './svgs/lnsb.svg';
import cdfrm2 from './svgs/cd-flat-rotatable-mirror-2.svg';
import fc from './svgs/fixed-corner-cube.svg';
import fm from './svgs/fixed-mirror.svg';
import laser from './svgs/laser.svg';
import mc from './svgs/movable-corner-cube.svg';
import pmh from './svgs/parabolic-mirror-w-hole.svg';
import pmh2 from './svgs/parabolic-mirror-w-hole-2.svg';

export const ttImgSrc = {
    'aperturewheel': wheel,
    'flatrotatablemirror': frm,
    'globar': globar,
    'parabolicmirror': pm,
    'tungsten': tungsten,
    'cdflatrotatablemirror': dcfrm,
    'samplecompartment': sample,
    'mct': MCT,
    'lnsb': lnsb,
    'cdflatrotatablemirror2': cdfrm2,
    'fixedcornercube': fc,
    'fixedmirror': fm,
    'laser': laser,
    'movablecornercube': mc,
    'parabolicmirrorhole': pmh,
    'parabolicmirrorhole2': pmh2,
}

Popup Component (GitHub):

import React, { useState } from "react";
import { ftirParts, toolTips, ttImgSrc } from "./SVGLibrary";
import { Dialog } from "@mui/material";
import "../style/SVGComponents.css";
import "../style/Popup.css";

export default function SVGComponent({ part, click }) {
  // Style is the intial stroke
  const [toggled, setToggled] = useState(false);

  const handleClick = () => {
    setToggled(!toggled);
  };

  const Component = ftirParts[part];

  return (
    <div className="component">
      <Component
        viewBox="-75 -0.5 418 212"
        className="svg"
        onClick={click ?? handleClick}
      />
      <Dialog className="popup" onClose={handleClick} open={toggled}>
        <h2>{toolTips[part].title}</h2>
        <img
          src={ttImgSrc[part]}
          id={`${part}-example-image`}
          className="example-image"
          alt=""
        />
        <p>{toolTips[part].text}</p>
      </Dialog>
    </div>
  );
}

-- EDIT --

Popup sample: