How to call different functions in different components based onClick function in ReactJs

Question

//Each Size has a function for every letter which should be called if the letter in the currentsize is clicked. Click here to see how it should display

function App() {

const [pattern, setPattern] = useState()

const [size, setSize] = useState([ Small(), Medium, Large ])

const [letter, setLetter] = useState()

useEffect(() => {

setPattern();

return () => {
  setSize()
}

}, [size, pattern])

return (

<Router>
  <div id='app'>
    <Content setPattern={setPattern} />
    <Size setSize={setSize}/>
    <Switch>
      <Route exact path='/'>
        <Medium />
      </Route>
      <Route path='/small'>
        <Small pattern={pattern}/>
      </Route>
      <Route path='/large'>
        <Large pattern={pattern}/>
      </Route>

//Size components
function Size({ setSize }){

return (

<div id='size'>

    <Link to='small' onClick={() => setSize(Small)} className='button'>Small</Link>
    <Link to='/' onClick={() => setSize(Medium)} className='button'>Medium</Link>
    <Link to='large' onClick={() => setSize(Large)} className='button'>Large</Link>
    <Link to='xLarge' onClick={() => setSize(xLarge)} className='button'>X-Large</Link>
</div>

//Clickable letters to display in the current size

function Content({ setPattern, pattern }) {

const history = useHistory()

return (

<div id='content'>
    <Link to={history} onClick={() => setPattern(!pattern, LetterA())} className='button-sm'>A</Link>
    <Link to={history} onClick={() => setPattern(!pattern, LetterB())} className='button-sm'>B</Link>
    <Link to={history} onClick={() => setPattern(!pattern, LetterC())} className='button-sm'>C</Link>
    <Link to={history} onClick={() => setPattern(!pattern, LetterD())} className='button-sm'>D</Link>
    <Link to={history} onClick={() => setPattern(!pattern, LetterE())} className='button-sm'>E</Link>
</div>

import { bgColorX, bgColorY, imageX, imageY, verticalAxis, pieces } from '../Layouts/Large';

//Letters functions to be called

export default function LetterA() { for(let i = 3; i < verticalAxis.length - 3; i++) {

for( let k = 3; k <= 17; k++) {
  k % 2 === 1 ? 
  pieces.push({ image: imageY, x: k, y: i }) : 
  pieces.push({ image: imageX, x: k, y: i }); 
}

}