I have an array

[
    {
        url: require('./videos/politics.mp4'),
        title: 'US Supreme Court justices in Trump case lean toward some level of immunity',
        description: 'The Supreme Court's conservative majority suggests U.S. presidents should have some immunity from criminal charges for official acts, but not absolute immunity. Trump's appeal for immunity in election-related charges faces skepticism, with concerns about potential abuse of prosecution power. Justices consider returning the case to lower courts for further analysis.',
        source: 'Reuters - John Kruzel & Andrew Chung - April 25, 2024',
        link:'https://www.reuters.com/legal/us-supreme-court-weighs-trumps-bid-immunity-prosecution-2024-04-25/',
        likes: 320,
        comments: 23,
        saves: 3,
        shares: 12,
    },...more items]

I am using array.filter to implement a search functionality. The filter is working but after the first search, the pictures gets jumbled up.

This is the search page:

function SearchPage({videos}) {
    const [searchTerm, setSearchTerm] = useState("");
    const [filteredVideos, setFilteredVideos] = useState([]);
    // Function to filter videos based on search term
    const filterVideos = () => {
        // const filtered = videos.filter(video =>
        //     (video.title.toLowerCase().includes(searchTerm.toLowerCase()) || video.description.toLowerCase().includes(searchTerm.toLowerCase()) || video.source.toLowerCase().includes(searchTerm.toLowerCase()))
        // );

        const filtered = [];
        for (let i=0; i < videos.length; i++){
            if(videos[i].title.toLowerCase().includes(searchTerm.toLowerCase()) || videos[i].description.toLowerCase().includes(searchTerm.toLowerCase()) || videos[i].source.toLowerCase().includes(searchTerm.toLowerCase())){
                filtered.push(videos[i])
            }
        }
        setFilteredVideos(filtered);
        console.log(filteredVideos)
    };

    return (
        <div className="container">
            <div className="search-container">
                <input type="text" placeholder="Search..." className="search-input"
                       onChange={(e) => setSearchTerm(e.target.value)}/>
                <button className="search-button" onClick={filterVideos}>🔍</button>
            </div>
            <div className="grid-container">
                {filteredVideos.map((video, index) => (
                    <div className="grid-item">
                        <div className="title">{video.title}</div>
                        <video muted loop style={{width: "42vw"}}>
                            <source src={video.url} type="video/mp4"/>
                        </video>
                    </div>
                ))}

            </div>
        </div>);
}

export default SearchPage;

This is the search page:(Filter is run initially for “” so that all the results are shown)
Search Page

When I search something the second time(for example tiktok):
Second Search
You can see that the title is correct but the picture is getting messed up.

I am new to stackoverflow and it’s my first post. Lmk if I should add any other specific info.

I tried using a for loop to filter, didnt work.