Nested Routing using V6 in React with outlet

  javascript, nested, outlet, reactjs, routes

I’m trying nested routing but when I reach the intended component, the previous one also shows there in React js.

This is App.js component
Little explanation of code is :
/tech is main component and /detail is nested component where I want to go

        <Header />
          <Route path="/tech" element={
  , key) => {
              return <Newscard key={key} {...value} />
            <Route path="/detail" element={
    , key) => {
                return <Detail key={key} {...value} />
              })} />


this is NewsCard.js

from this component, I want to go to detail.js so I used outlet

    const Newscard = (props) => {
        return (
        <div >
                    <div className="card w-25 " style={{marginLeft:"500px", marginTop:"10px"}} >
                        <img src={props.urlToImage} className="card-img-top" alt="..." />
                        <div className="card-body">
                            <h5 className="card-title">{props.title}</h5>
                            <h6 className="card-subtitle mb-2 text-muted">{}</h6>
                            <p className="card-text">{props.content}</p>
                            <Link className="card-link" to="detail">read more</Link>


this is details.js where I want to go.

    const Detail=(props)=>{
    <div className="card w-25 " style={{marginLeft:"500px", marginTop:"10px"}} >
                        <img src={""} className="card-img-top" alt="..." />
                        <div className="card-body">
                            <h5 className="card-title">"hello"</h5>
                            <h6 className="card-subtitle mb-2 text-muted">"checking.."</h6>
                            <p className="card-text">ll</p>

problem is:

when I reach to detail the newscard.js and detail.js both component remain on screen.but newscard should stay hide and detail should show on screen.

Source: Ask Javascript Questions