I have a react website and have a jsx file that is trying to call some functions I defined in my App.js

import React from "react";
import function1 from './App.js'
import function2 from './App.js'
import function3 from './App.js'

function Home() {
  return (
    <div className="home">
      <div class="container">
        <div>
          {function1() ? function2(): function3()}
        </div>
      </div>
    </div>
  );
}

export default Home;

I then have an App.js file that looks like this:

import React from 'react';
import './App.css'

function App() {
    const function1 = () => { 
        return booleanvalue
    }
    const function2 = () => { 
        return (<button onClick={...} ... </button>)
    }
    const function3 = () => { 
        return (<button onClick={...} ... </button>)
    }
}

export default App;

But nothing shows up from the jsx file. I tried exporting these functions at the end but this also doesn't do anything. Is there any way I can export these local functions within my App() or call them because I am already exporting App?