How would I make a cascading dropdown of categories and sub categories in React using nodejs api?

So, here is what I am trying to do. there are 2 dropdowns. First user have to select a category and then its sub category from those dropdown lists. After which products as per selections will be displayed.

Initially every option is fetched from nodeJS api using AXIOS. categories and sub categories are rendering fine at start. but when any category is selected 404 error pops up. My APIs are running excellent in postman so APIs are all fine this is my code so far:

import { FormLabel } from "react-bootstrap";
import { useState, useEffect } from "react";
import axios from "axios";
import '../CategoryList.css';

function FilterComp() {
    const [category, setCategory] = useState([]);
    const [categoryId, setCategoryId] = useState('');
    const [subCategory, setSubCategory] = useState([]);
    const [subCategoryId, setSubCategoryId] = useState('');
    const [productdata, setData] = useState([]);

    // USE EFFECT FOR ---CATEGORY LIST---
    useEffect(() => {
        console.log("Category first load");
        axios.post('http://localhost:5001/categories/list-category')
            .then(function (response) {
                // handle success
                let categoryData = (response.data.data)
                setCategory(categoryData);
                console.log(categoryData);
            })
            .catch(function (error) {
                // handle error 
                console.log(error);
            })
    }, [])

    const handleCategory = (event) => {
        const getCategoryId = event.target.value;
        setCategoryId(getCategoryId);
    }

    const handleSubCategory = (event) => {
        const getSubCategoryId = event.target.value;
        setSubCategoryId(getSubCategoryId);
    }

    // USE EFFECT FOR ---SUB CATEGORY LIST---
    useEffect(() => {
        const params = categoryId;
        console.log(params);
        console.log("SubCategory first load");
        axios.post(`http://localhost:5001/sub-categories/list-subcat/${params}`)
            .then(function (response) {
                // handle success
                let subCategoryData = (response.data.data)
                setSubCategory(subCategoryData);
                console.log(subCategoryData);
            })
            .catch(function (error) {
                // handle error 
                console.log(error);
            })
    }, [categoryId])

    // USE EFFECT FOR ---PRODUCT LIST---
    useEffect(() => {
        console.log("Product first load");
        axios.post('http://localhost:5001/product/product-list')
            .then(function (res) {
                // handle success
                let data = (res.data.data)
                console.log(data);
                setData(data);

            })
            .catch(function (error) {
                // handle error 
                console.log(error);
            })
    }, []);


    return (
        <div className='sidebar'>
            <h5>Select following options from dropdown to filter Products</h5>

            <FormLabel> <h6>Category: {categoryId} </h6> </FormLabel>
            <select name="category" className="form-control size" onChange={(e) => handleCategory(e)}>
                <option>--Select Category--</option>
                {
                    category.map((getCat) => {
                        return (
                            <option key={getCat._id} value={getCat._id} > {getCat.category}  </option>
                        )
                    })
                }
            </select>

            <FormLabel><h6>Sub-Category: {subCategoryId} </h6> </FormLabel>
            <select name="category" className="form-control size" onChange={(e) => handleSubCategory(e)}>
                <option>--Select Sub-Category--</option>
                {
                    subCategory.map((getSubCat, index) => {
                        return (
                            <option key={getSubCat._id} value={getSubCat._id} > {getSubCat.subCategory}  </option>
                        )
                    })
                }
            </select>

            <input className="sizefield form-control" type="text" placeholder="FROM"></input>
            <input className="sizefield form-control" type="text" placeholder="TO"></input>
            <br></br>
            <button className="btnstyle"><b>FILTER PRICE</b></button>

            {
                productdata.map((currpro) => {
                    return (
                        <div className="productdiv">
                            <div className="row">
                                <div className="col-sm-4">
                                    <div className="card">
                                        <div className="card-body">
                                            <h5 className="card-title">{currpro.productName}</h5>
                                            <p className="card-text">{currpro.description}</p>
                                            <a href="#" className="btn btn-primary">{currpro.price}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    )
                })
            }


        </div>
    )
}

export default FilterComp;