I am new to react in the below array there are two items with – symbol.
when I search it should return only two values but why its returning all the values.I debugged but still not able to resolve it.
Can you let me know how to fix it
Providing code and fiddle below

import React, { useState, useEffect } from 'react';
import { MuiChipsInput } from 'mui-chips-input';

function App() {
  const [chips, setChips] = React.useState([]);

  const [filteredData, setFilteredData] = useState([]);
  const [testData, setTestData] = useState([
    {
      id: 'd22323',
      application: 'xxxx3',
      lion: ['sports', 'sports-xxxx3 -Simp-Copy', 'sports-xxxx3 -Simp'],
      name: 'sports-xxxx3 -Simp-Copy',
      proxyHost: '',
      proxyPort: 0,
      tigerDomain: '',
      tigerPath: '/sports.jsp',
      httpHeaders: {
        bhhjh: ['jhjhj'],
        '': ['', ''],
        Authorization: ['ddf'],
      },
      httpMethod: 'GET',
      payLoadType: null,
      templateData: [
        {
          data: '',
          validations: [
            {
              responseBody: {
                value: 'xzxzzx',
                validationType: 'CONTAINS',
              },
            },
            {
              responseBody: {
                value: '',
                validationType: 'EQUALS',
              },
            },
            {
              responseBody: {
                value: '',
                validationType: 'EQUALS',
              },
            },
          ],
          validationFields: null,
        },
      ],
      parameters: {
        ds: 'sdsd',
        df: 'd',
        fd: 'd',
      },
      dependencies: null,
      deleted: false,
    },
  ]);

  // Fetch lion from testData on component mount
  React.useEffect(() => {
    const lion = testData.map((item) => item.lion).flat(); // Combine lion from all objects
    setChips(lion);
  }, [testData]); // Empty dependency array ensures it runs only once

  const handleChange = (newChips) => {
    setChips(newChips);

    // Filter data based on chips
    const filtered = testData.filter((item) => {
      const itemlion = item.lion || []; // Handle cases where lion might be undefined
      return newChips.some((chip) =>
        itemlion.some((tag) => tag.toLowerCase().includes(chip.toLowerCase()))
      );
    });
    console.log('filtered', filtered);
    setFilteredData(filtered);
  };

  return (
    <div>
      <MuiChipsInput value={chips} onChange={handleChange} />

      {filteredData.length > 0 ? (
        filteredData.map((item) => (
          <div key={item.id}>
            {/* Display relevant data from item here */}
            {item.lion}
          </div>
        ))
      ) : (
        <div>No results found.</div>
      )}
    </div>
  );
}

export default App;