I have a server component like this

export default async function MyComponent({searchParams}: {searchParams: any}) {
  const selectedDuration = searchParams.selectedDuration ?? '2'
  const data = await fetchSth(selectedDuration)
  return <MyDataComponent />
}

export default function MyDataComponent() {
  <Dropdown onChange={(value) => {
     const updatedPath = `${pathName}?selectedDuration=${value}`
     router.push(updatedPath)
  }}
}

export default function SomePage() {
  <Suspense fallback={<div>Loading</div>}>
    <MyComponent />
  </Suspense>
}

The sever component is able to show the Loading... when it is first rendered. However, after the dropdown value changed, the loading is not showing anymore. Although the url did change and the data also has fetched. I want to show to preload fallback again. Any clues?