Filtering an Embedded Power BI Report via HTML inputs

Here is a code example I have written in React:

import React, { useState, useEffect } from 'react';
import * as pbi from 'powerbi-client';

const Report = () => {
  const [report, setReport] = useState(null);
  const [inputValue, setInputValue] = useState('');

  useEffect(() => {
    const embedConfiguration = {
      type: 'report',
      id: '<REPORT_ID>',
      embedUrl: '<REPORT_EMBED_URL>',
      accessToken: '<ACCESS_TOKEN>',
      tokenType: pbi.models.TokenType.Aad
    };

    const powerbi = new pbi.Service(
      pbi.factories.hpmFactory,
      pbi.factories.wpmpFactory,
      pbi.factories.routerFactory
    );

    const reportContainer = document.getElementById('reportContainer');
    const report = powerbi.embed(reportContainer, embedConfiguration);
    setReport(report);
  }, []);

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  const applyFilter = () => {
    if (report) {
      report.getFilters()
        .then((filters) => {
          const newFilters = [{
            ...filters,
            $schema: "http://powerbi.com/product/schema#basic",
            target: {
              table: "<TABLE_NAME>",
              column: "<COLUMN_NAME>"
            },
            operator: "In",
            values: [inputValue]
          }];

          report.setFilters(newFilters)
            .catch((error) => console.error(error));
        })
        .catch((error) => console.error(error));
    }
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <button onClick={applyFilter}>Filter</button>
      <div id="reportContainer" />
    </div>
  );
};

export default Report;