I'm trying to understand how I can trigger OnSwipe from inside another JS file called CardFooter.js containing a button with OnClick triggering OnSwipe from the previous JS file called CardItem.js. They both are called inside Card.js.

I'm learning Nextjs with Reactjs components. Any insight would greatly be appreciated

CardFooter.js

import { CardItem }  from '../components/CardItem'

const CardFooter = () => { 

   return (
   
       <Button onClick={() => CardItem.onSwipe('left')}></Button>;
       <Button onClick={() => CardItem.onSwipe('right')}></Button>;

   )
}

export default CardFooter

CardItem.js

import { useState, useContext, createContext } from 'react'
import { Context } from '../context/Context'
import TinderCard from 'react-tinder-card'
import { test } from '../components/CardFooter';

export const CardItem = ({ card }) => {

  const { handleRightSwipe, handleLeftSwipe, currentAccount } = useContext(Context)

  const onSwipe = dir => {
    if (dir === 'right') {
      handleRightSwipe(card, currentAccount)
    }
    if (dir === 'left') {
      handleLeftSwipe(card, currentAccount)
    }
  } 

  return (
    <TinderCard
      preventSwipe={['up', 'down']}
      onSwipe={onSwipe}
    >
    <div style={{ backgroundImage: `url('${card.imageUrl}')` }}>
    <div>
      {card.name}
    </div>
  </div> 
</TinderCard> 
)
}

export default CardItem

Card.js

import { useContext } from 'react'
import { Context } from '../context/Context'
import CardFooter from './CardFooter'
import CardItem from './CardItem'

const Card = () => {

const { cardsData } = useContext(Context)

  return (
    <div className={style.wrapper}>
      <div className={style.cardMain}>
        <div className={style.swipesContainer}>
          {cardsData.map((card, index) => (
            <CardItem card={card} key={index} />  
          ))}
        </div>
      </div>
      <CardFooter  />
    </div>
  )
}

export default Card