react router v6 No routes matched location

The route rendering the Explore component needs to specify a trailing wildcard matcher "*" so descendent routes can also be matched.

Descendent <Routes>

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="create" element={<Creation user={account} />} />
  <Route
    path="/explore/*" // <-- add trailing wildcard matcher
    element={<Explore />}
  />
  <Route path="/dashboard" element={<Dashboard />} />
  <Route path="test" element={<Test />} />
</Routes>

Keep in mind that <Link to={`/explore/${infoItem.id}`}>View event</Link> is specifying an absolute path "/explore/:id" and nested Routes components builds from the parent route:

<Link to={`/explore/${infoItem.id}`}>View event</Link>

...

<Routes>
  <Route 
    path="/:id" // <-- Omit "/explore" from path
    element={<Test />}
  />
</Routes>

Or to use relative routing, omit the leading "/" slash and link relatively to the infoItem.id.

<Link to={`${infoItem.id}`}>View event</Link>

...

<Routes>
  <Route path=":id" element={<Test />} />
</Routes>

Update

So is there anyway to render in a new page and not under my component?
So if I go to "/explore/event1" Test does not appear under the event
list but in another new blank page?

Yes. For this I suggest a small refactor to move the <Route path=":id" element={<Test />} /> out to the main routing. Use a layout route to render an Outlet and nest an index route specifically for Explore and a nested route for Test. Remove the Routes code from Explore.

Example:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="create" element={<Creation user={account} />} />
  <Route path="/explore">
    <Route index element={<Explore />} />   // "/explore"
    <Route path=":id" element={<Test />} /> // "/explore/:id"
  </Route>
  <Route path="/dashboard" element={<Dashboard />} />
  <Route path="test" element={<Test />} />
</Routes>

Explore

return (
  <div style={{marginTop:'5em'}}>
    {isInitialized ?
      <div className="wrapper">
        {eventArray.map(infoItem => (
          <div key={infoItem.id}>
            <CardEvent
              img={infoItem.pathImg ? infoItem.pathImg : lpass} 
              title={infoItem.idName} 
              date={infoItem.eventDate.toString()}
            />
            <Link to={`/explore/${infoItem.id}`}>View event </Link>
          </div>
        ))}
      </div> 
      : <p>Error</p>
    }
  </div>
);