How to Filter my objects base in a property ? React

For example,

I have an array of objects which are movies with multiple genres and I just wanna render the ones that match the genre of the object I took using Find. I already have one object filtered which is the one I took the information to render to the component, but I Have another component below that is a row of the movies, and I want the object movies to match the actual object genre. Like in Netflix “you might also like” and pass that as a Prop and render only the movie pictures in the other component. and how to avoid rendering the same object that I am using as a reference to render the new row?

import { useParams } from "react-router-dom";
import movies from '../data/dataAll'import SubRow from "./SubRow";
import './MovieDetails.css'

const MovieDetails = () => {const { id } = useParams();

const movies = [

{ title: 'Movie 1', genre: 'horror, suspense' },{ title: 'Movie 2', genre: 'drama, futuristic' },{ title: 'Movie 3', genre: 'horror, gore' },{ title: 'Movie 4', genre: 'action, gore' },];

// Get the Object info using id
const movie = movies.find(movie => movie.id === parseInt(id))


return (
    <div className=" bg-wrapper moviedetails">
        <div className="moviedetails-content bg-wrapper-content">
            <div className="moviedetails-content-info ">
                <h2 className="movie-title">{movie.title}</h2>

                <div className="movie-tags">
                <span>{movie.rating}</span>
                <span>{movie.type}</span>
                <span>{movie.duration}</span>
                </div>

                <p className="movie-base">{movie.sinopsis}</p>
                <hr className="line"/>
                <p><strong>Genrer: </strong>{movie.genrer}</p>
            </div>
        </div>

        <div className="banner-background bg-wrapper-image" style={{ backgroundImage: `url(${movie.cover})` }} >

        </div>

        <SubRow recomended={ }></SubRow>

    </div>
);

}

export default MovieDetails;

I used:

 const recomendedMovies = movies.filter(recomended => recomended.genrer.textContent === movie.genrer.textContent);

but is also rendering the actual object where I took the genre reference from and I want to avoid that , to look like a real movie recomendations

Could it be because I created the objects in a wron way ?