Benchmark.js when used in '.jsx' file throws error "Critical dependency: the request of a dependency is an expression"

Question

I am trying to get benchmark results of a loop used and display it. My code:

import Benchmark from 'benchmark';
import React, { useState } from 'react';
import Navigation from '../Navigation/Navigation';

const Array = () => {
  const suite = new Benchmark.Suite();
  const values = [];

  var sum = 0;
  const initialElement = '';
  const [inputArrayElement, setInputArrayElement] = useState([]);
  const [enteredElement, setEnteredElement] = useState(initialElement);
  const handleSubmit = (e) => {
    e.preventDefault();
    setInputArrayElement((prev) => [...prev, enteredElement]);
    setEnteredElement(initialElement);
  };

  const findElement = (inputArrayElement, n) => {
    ...logic...
  };

  suite
    .add('Array.prototype.some', () => {
      const processed = values.some((value) => value > 0);
    })
    .on('cycle', (event) => {
      console.log(event.target.toString());
      console.log(event.target.name);
      console.log(event.target.stats.rme);
      console.log(event.target.stats.sample.length);
      console.log(event.target.count); // The number of times a test was executed.
      console.log(event.target.cycles); // The number of cycles performed while benchmarking.
      console.log(event.target.hz);
    })
    .run();
  return (
    <div>
      <Navigation />
        <div className="row">
          <div className="col-sm border rounded  my-3 py-4 shadow p-3 mb-3 bg-light rounded">
            BenchMark
            {...function call...}
          </div>
        </div>
  );
};

export default Array;

Error:

WARNING in ./node_modules/benchmark/benchmark.js 649:36-51 Critical dependency: the request of a dependency is an expression

I tried solving the issue in webpack.config.js file could not find the solution.