I'm trying to pass data from NavBar.js to a child component Mybooks.js which has already been rendered by React router, then, I get double rendering. Routing is happening in App.js.

NavBar.js

const AlreadyConnected = () => {

    return(
      <div>
        <MyBooks address={walletAddress}/>
      </div>
    )
  }

  return(
    <div>
      {walletAddress ? AlreadyConnected() : null}
    </div>
  )
};

MyBooks.js

import React, { useEffect } from 'react'

const MyBooks = ({address}) => {

    console.log(address);
    const URL = `http://localhost:3001/api/tatumapi`;
    const chain = 'ETH';
    const params = { address: address, chain: chain };

    useEffect(() => {
        fetch(URL,
            {
                method: 'POST',
                mode: 'cors',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(params)
            })
            .then(response => response.json())
            .then(data => console.log(data));
    }, [])

    return(<div>TEST</div>)
}

Apps.js

import { NavBar } from './pages/NavBar';
import MyBooks from './pages/MyBooks';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

const App = () => {

    return (
        <Router>
            <div>
                <NavBar />
                <div>
                    <Routes>
                        <Route path='/' element={<MyBooks />} />
                    </Routes>
                </div>
            </div>
        </Router>
    )
}

export default App;

Output:

TEST
TEST

How to pass props from NavBar.js to MyBooks.js without rendering the same component twice?