React How do use a single layout webpage for different personal information

Hi there, Currently, I am trying to understand how react.js is working with help with react-router-dom. I have to face issues that I wanted to use the same layout for the personal detail form. but I want it to display different data for two different people. let say I click on "phua" and then it will use the layout and get the data from Data.js and provide the information, if I click on "foong" then the system will use the same layout but uses the data from foong in data.js
App.js

import React from 'react';
import "./App.css"
import Navbar from './components/Navbar';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import Home from './components/pages/HomePage/Home'
import Footer from './components/pages/Footer/Footer';
import Service from './components/Service';

import Info from './components/pages/Info/Info';


function App(){
  return(
    <Router>
      <Navbar />
      <Switch>
        <Route path='/' exact component={Home}/>
        <Route path='/service' exact component={Service}/>
        <Route path='/Information' component={Info/phua}/>
        <Route path='/Information' component={Info/foong}/>

      </Switch>
      <Footer />
    </Router>
  );
}


export default App;

Information.js

import React from 'react'
import "./Information.css"
function Information({img, alt, name, age, gender}) {
    return (
        <>
        <div className="container">
            <div className="row_details">
                <div className="col-personal-logo"> 
                    <img src={img} alt={alt} className="personal-image"/>
                    <h2>Name:{name}</h2>
                    <p>Age:{age}</p>
                    <p>Gender:{gender}</p>
                    <p></p>
                </div>  
                <div className="col-personal">

                </div>

            </div>
        </div>

        </>
    )
}

export default Information

data.js

export const phua= {
    img:'images/dribbble-avatar.webp', 
    alt:'Phua',
    name:'Phua Yeong Tsann',
    age:'42', 
    gender:'Male',
}

export const foong= {
    img:'avatar_dribbble.webp', 
    alt:'Foong',
    name:'Foong',
    age:'32', 
    gender:'Female',
}

info.js

import React from 'react'
import Information from '../../Information'
import {phua} from './Data'

function Info() {
    return (
        <>
            <Information {...phua} />

        </>
    )
}

export default Info