How to use FullCalendar goToDate in React

Question

I am working on a react app that shows the AppointmentList (which is a component) as a daily calendar view using the FullCalendar package. When I call the component AppointmentList, I pass in a parameter: some date. I want to use the FullCalendar goToDate function to go the date that I am getting in as a parameter. I tried using the ref and calendarApi but it doesn't work.

this is how my AppointmentList component looks for now

const AppointmentList = ({ click }) => {
  const arr = [
    {
      id: 1,
      title: 'event 1',
      start: '2023-03-02T10:00:00',
      end: '2023-03-02T12:00:00',
    },
  ]
  console.log(click)

  const calendarRef = useRef(null)
  const [date, setDate] = useState(new Date())

  const handleDateChange = ({ click }) => {
    setDate({ click })
  }

  useEffect(() => {
    calendarRef.current.getApi().gotoDate(date)
  }, [date])

  return (
    <Box>
      <FullCalendar
        ref={calendarRef}
        dateClick={(info) => handleDateChange(info.date)}
        plugins={[timeGridPlugin, interactionPlugin]}
        initialView="timeGridDay"
        events={arr}

      />
    </Box>
  )
}

export default AppointmentList

How can I have FullCalendar to go to the 'click' date?

EDIT:

This is how my page looks. I want the calendar view to change when the buttons (today, < > ) above are clicked. That value is given to my component as a parameter. I am sure the value gets passed to my component because I see it change when I do console.log(click) but the issue is that it doesn't change the calendar view