how to filter multi array list in reactjs

I have tried to implement a search functionality from a list that has multi array. So I want to search the particular keyword from the array. I have tried but it throws error.

const listComponent = [
{
id: 0,
title: "Common",
subMenu: [
  {
    image: "",
    secTitle: "",
    subTitle: ""
  }
]
},
{
id: 1,
title: "Compute",
subMenu: [
  {
    image: require("../../assets/images/scaling.png"),
    secTitle: "one comp",
    subTitle: ""
  },
  {
    image: require("../../assets/images/ec2.png"),
    secTitle: "two comp",
    subTitle: ""
  },
  {
    image: require("../../assets/images/lambda.png"),
    secTitle: "three comp",
    subTitle: ""
  },
  {
    image: require("../../assets/images/zone.png"),
    secTitle: "four comp",
    subTitle: ""
  }
  ]
  },
{
id: 2,
title: "Second",
subMenu: [
  {
    image: "",
    secTitle: "",
    subTitle: ""
  }
]
},
{
id: 3,
title: "Third",
subMenu: [
  {
    image: "",
    secTitle: "",
    subTitle: ""
  }
]
},
{
id: 4,
title: "Fourth",
subMenu: [
  {
    image: "",
    secTitle: "",
    subTitle: ""
  }
  ]
 }
];

``

constructor(props) {
super(props);

this.state = {
  components: listComponent,
  filterResult: listComponent
};

this.filterComponents = this.filterComponents.bind(this);
}

``

UNSAFE_componentWillReceiveProps(nextProps) {
this.setState({
  components: nextProps.components
});
}

``

filterComponents = event => {
let value = event.target.value;
let components = this.state.components;

let filterResult = components.filter(
  component =>
    component.subMenu.findIndex(sub =>
      sub.secTitle.toLowerCase().includes(value)
    ) !== -1
);

console.log(filterResult);

this.setState({ filterResult });
};

``

<ul className="listAll">
          {this.state.filterResult.map((items, key) => (
            <li key={key}>
              <div
                className="compTitle"
                onClick={() => this.openCloseComponent(items.id)}
              >
                <p>{items.title}</p>
                {this.state.isComOpen === items.id && this.state.isOpen ? (
                  <KeyboardArrowDown className="compArrow" />
                ) : (
                  <KeyboardArrowUp className="compArrow" />
                )}
              </div>
              <ul
                className={
                  this.state.isComOpen === items.id && this.state.isOpen
                    ? "displayBlock secondDrop"
                    : "displayNone"
                }
              >
                {items.subMenu.map((submenu, i) => (
                  <li
                    key={i}
                  >
                    <img src={submenu.image} alt="" />
                    <div>
                      <p className="secTitle">{submenu.secTitle}</p>
                      <p className="subTitle">{submenu.subTitle}</p>
                    </div>
                  </li>
                ))}
              </ul>
            </li>
          ))}
        </ul>
        {this.state.filterResult.length === 0 && (
          <p className="noComp">No components found</p>
        )}

I want to search secTitle in subMenu. The keyword that matches any secTitle it should be displayed and other should get hided. The about code throws error.

So how to fix it. Any answers will be appreciated.

If I search one comp the output should be

{
    id: 1,
    title: "Compute",
    subMenu: [
      {
        image: require("../../assets/images/scaling.png"),
        secTitle: "one comp",
        subTitle: ""
      }
    ]
}

but now the output is,

{
    id: 1,
    title: "Compute",
    subMenu: [
      {
        image: require("../../assets/images/scaling.png"),
        secTitle: "one comp",
        subTitle: ""
      },
      {
        image: require("../../assets/images/ec2.png"),
        secTitle: "two comp",
        subTitle: ""
      },
      {
        image: require("../../assets/images/lambda.png"),
        secTitle: "three comp",
        subTitle: ""
      },
      {
        image: require("../../assets/images/zone.png"),
        secTitle: "four comp",
        subTitle: ""
      }
    ]
}

from how to filter multi array list in reactjs