I don't know why you are using react-router-dom and then not really use it for what it was designed for. You are working with function components, so as far as I can tell, any solution will require a React hook. Whether you just use the useParams hook to get the id to filter by, or if you declare an id state in the parent with useState, or create a React context and use both useState and useContext, or use Redux and useDispatch and useSelector. Do you see where this is headed?

I suggest just using the useParams hook as it's the most trivial to implement.

1. Fix the character bio route so the id route match param is easier to read and consume.

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

   With path="/CharBio:id" the link would inject a leading : character into the id with to={`/CharBio${element.id}`}, i.e. instead of "goku" the id param would be ":goku", and this doesn't work easily for filtering.

2. Fix the link in Perso so it's linking to a "/CharBio/:id" path.

   <Link to={`/CharBio/${element.id}`}>
     <h1>{element.id}</h1>
   </Link>
   

3. Use the useParams hook in the CharBio component and filter the API data by id.

   export default function CharBio() {
     const { id } = useParams();
     const element = API.find(el => el.id === id);
     return element ? <p>{element.bio}</p> : null;
   }