React js, confuses fetch url with another fetch

In my Home component, I have this fetch function

export default function Home() {
  const { rootUrl } = useContext(UserContext);
  useEffect(() => {
    fetch(`${rootUrl}/api/products/featuredProducts`)
      .then((result) => result.json())
      .then((result) => {
        console.log(result);
      });
  }, []);
}

That is supposed to pull products from the db which are featured. But every time I try to run that fetch it confuses with another fetch in my app which is the get single product fetch, which is this code:

export default function ProductView() {
  const { productId } = useParams();
  const { rootUrl } = useContext(UserContext);
  const { addToCart } = useContext(UserContext);
  const [productData, setProductData] = useState("");

  useEffect(() => {
    fetch(`${rootUrl}/api/products/${productId}`)
      .then((result) => result.json())
      .then((result) => {
        setProductData(result);
      });
  }, []);

I will get an error in my backend API with this message:

 CastError: Cast to ObjectId failed for value "featuredProducts"

That "featuresProducts" is my endpoint for my first fetch. It seems that something is confusing it as my parameter ID for my second fetch url in my ProductView component, this fetch below:

fetch(`${rootUrl}/api/products/${productId}`)

I don't understand why is this happening as my other routes with "api/products/plus other endpoints here" work just fine, it's just this my new addition to fetch featured products won't work