Javascript – How to use a Function Import Inside another Function which is a export Function in ReactJS

Hi I am new to React and learning about it. While I was learning about Named and Default Exports I ran into a issue. I am not sure how to explain my doubt in words here is my code.

namedExport.js

const name = "xyz";
const age = 20;

const myFunc = () => {
    const name = "abc";
    const age = 21;
    return (<>
    <h2>{name} is {age} years old.</h2>
    </>);
}

export {name, age}
export {myFunc}

defaultExport.js

const myFunction = () => {
    const name = "ijk";
    const age = 22;
    return (<>
    <h3>{name} is {age} years old.</h3>
    </>);
}

export default myFunction

App.js

import { name, age, myFunc } from "./namedExportTest";
import myFn from "./defaultExportTest";

function App() {
  return (
    <div className="App">
      <h1>Hi Everyone</h1>
    </div>
  );
}

function Exports() {
  return (
    <>
      <div className="exportNamed">
        <h1>My name is {name}, I am {age}.</h1>
      </div>
      <myFunc />
      <myFn />
    </>
  );
}

export {Exports};
export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import {Exports} from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
    <Exports />
  </React.StrictMode>
);

I am not getting the Expected Output.
My Expected Output:

Hi Everyone //in h1 tag
My name is xyz, I am 20. //in h1 tag
abc is 21 years old. //in h2 tag
ijk is 22 years old. //in h3 tag

But the output I got is:

Hi Everyone //in h1 tag
My name is xyz, I am 20. //in h1 tag

I am not sure what is the mistake I did. If anyone know what mistake I did, please post it with the Code Example to get my Expected Output.

Thanks!