I am creating a pomodoro app and trying to send function from page.tsx to timer.tsx but I am getting not a function error while calling I have tried looking online for solutions but to no avail it says that there is type error:SwitchStage is not a function and same for gettickingtime

"use client";
import React, { useRef, useState } from 'react'
import Navbar from './components/Navbar'
import Timer from './components/Timer'

// import Herosection from './components/Herosection'
// import Skills from './components/Skills'
// import Projects from './components/Projects'

function page() {

  const [pomodoro,setpomodoro]=useState(25);
  const [shortbrk,setshortbrk]=useState(5);
  const [longbrk,setlongbrk]=useState(10);
  const [seconds, setSecond] = useState(0);
    const [consumedSecond, setConsumedSecond] = useState(0);
    const [ticking, setTicking] = useState(false);
    const [isTimeUp, setIsTimeUp] = useState(false);
    const [openSetting, setOpenSetting] = useState(false);
  const [stage,setstage]=useState(0);

  const alarmRef = useRef();
    const pomodoroRef = useRef();
    const shortBreakRef = useRef();
    const longBreakRef = useRef();

  const SwitchStage = (Index)=>
    {
      setstage(Index)
    };

    const getTickingTime = () => {
      const timeStage = {
        0: pomodoro,
        1: shortbrk,
        2: longbrk,
      };
      return timeStage[stage];
    };
  return (
    <div className='min-h-screen bg-black'>
      <div className='max-w-7xl mx-auto p-5'>
        <Navbar/>
        <Timer 
        SwitchStage={SwitchStage} 
        getTickingTime={getTickingTime}/>
      </div>
      
    </div>
  )
}

export default page

Page.tsx^^

import { ButtonsCard } from '@/components/ui/moveupbtn'
import React from 'react'

function Timer(SwitchStage,getTickingTime) {
  const options=["POMODORO","SHORT BREAK","LONG BREAK"]
  return (
    <div className='min-h-screen flex-col lg:flex-row gap-10 lg:gap-0 justify-between items-center mt-20 md:mt-10 '>
      <div>
        <div className='min-w-xl mx-auto flex justify-center items-center gap-10'>
          {
            options.map((Option,idx)=>{
              {
                return(
                <div className=' flex items-center  text-sm md:text-base '>
                    <h1 key={idx} className={'hover:underline underline-offset-8 bg-opacity-20 transition-all duration-100 ease-in-out decoration-indigo-500 cursor-pointer' } onClick={()=> SwitchStage(idx)}>
                      {Option}
                      </h1>
                </div>)
              }
            })
          }
        </div>
        
      </div>
      <div className='mt-10 mb-10 justify-center items-center flex min-h-[50vh]'>
            <h1 className='font-bold m-0 text-9xl'>
            {()=>getTickingTime()}:00
            </h1>
      </div>
      <div className='flex justify-center items-center'>
        {/* <button className='px-5 py-5 text-2xl rounded-full hover:bg-gray-800 bg-opacity-30 hover:scale-105 transition-all ease-in-out'>START</button> */}
        <button className="shadow-[inset_0_0_0_2px_#616467] px-12 py-4 rounded-full tracking-widest uppercase font-bold bg-transparent hover:bg-[#616467] hover:text-white dark:text-neutral-200 transition duration-200">
          STARt
        </button>
      </div>
    </div>
  )
}

export default Timer
 

timer.tsx

I tried finding solution online but couldn’t find any