[Modern UI] Search bar for the devices list

Hello Anton and everyone, I'm finding a way to implement a search bar for the devices list in the modern UI.
I found a similar example as they used the Material-UI Search Bar. First I have to create a list:

const devicesList = [
    "demo 1",
    "demo 2",
];

Then I have to set up for the Search Bar:

const [items, setItems] = useState(deviceList);
const [searched, setSearched] = useState("");

const requestSearch = (searchedVal) => {
    const filteredItems = deviceLists.filter((item) => {
        return item.toLowerCase().includes(searchedVal.toLowerCase());
    });
    setItems(filteredItems);
};

const cancelSearch = () => {
    setSearched("");
    requestSearch(searched);
};

Then return the Search Bar:

<SearchBar
    value={searched}
    onChange={(searchVal) => requestSearch(searchVal)}
    onCancelSearch={() => cancelSearch()}
/>

I would like to know if there was a way to implement it without having to create a whole new list like the first block of codes. Any ideas?

We already have full list of devices in the redux state.

Hi Anton, thanks for you response,

Is this the devices list in the redux state that you mentioned?

const device = useSelector(state => state.devices.items[deviceId]);

I tried this with the block below; however, it didn't work:

const [items, setItems] = useState(device);
const [searched, setSearched] = useState("");

const requestSearch = (searchedVal) => {
    const filteredItems = device.filter((item) => {
        return item.toLowerCase().includes(searchedVal.toLowerCase());
    });
    setItems(filteredItems);
};

I caught this error here: TypeError: Cannot read property 'map' of undefined

{items.map((item, index, list) => {

1. I tried the second time, this time I modified as this:

const items = useSelector(state => Object.values(state.devices.items));
const setItems = useState(device);

And I caught this second error: TypeError: Cannot read property 'filter' of undefined here:

const filteredItems = device.filter((item) => {