Pass parameter to page, data not updating

I have a navigation component where I’m passing a parameter to another page, the parameter is getting passed, however, the data in the dropdown is not updating for the passed ID:

nav:

<Link to='/service/ServiceAppointment/${car.Make}'> { serviceAppointment } </Link>

appointment page:

const ScheduleAppointment = () => {
 const { id } = useParams();
 
console.log (id);  //I can see the ID passed to the page in the console
 
  useEffect(() => {
    console.log(id); //the ID is not there
    scheduleAppointment(id);   
  });

  const Appointment= () => {
     //call to API for open dates
     //the ID never gets here

  }
}

Router:

<Route exact path='/service/appointment/:id' component={ ScheduleAppointment }   />

how can I get the appointment page to change when a new ID is passed to it?

>Solution :

Dependencies argument of useEffect is useEffect(callback, dependencies)

Let’s explore side effects and runs:

Not provided: the side-effect runs after every rendering.

 import { useEffect } from 'react';
    
    function MyComponent() {
      useEffect(() => {
        // Runs after EVERY rendering
      });  
    }

An empty array []: the side-effect runs once after the initial rendering.

 import { useEffect } from 'react';
    
    function MyComponent() {
      useEffect(() => {
        // Runs ONCE after initial rendering
      }, []);
    }

Has props or state values [prop1, prop2, ..., state1, state2]: the side-effect runs only when any dependency value changes.

import { useEffect, useState } from 'react';

function MyComponent({ prop }) {
  const [state, setState] = useState('');
  useEffect(() => {
    // Runs ONCE after initial rendering
    // and after every rendering ONLY IF `prop` or `state` changes
  }, [prop, state]);
}

in your case try this way

useEffect(() => {
    console.log(id); //the ID is not there
    scheduleAppointment(id);   
},[id]);