Use select values from the form as the API parameters to get the response - Reactjs

I'm trying to get the selected dropdown values from the form and passing it to the API as parameter to display the required details.

function Form() {

    let productID = [];
    let viewID = [];

    for (let i = 1; i <= 20; i++) {
        productID.push(i);
    }

    for (let j = 1; j <= 10; j++) {
        viewID.push(j);
    }
    
    const [ selectProduct, setSelectProduct ] = useState('');
    const [ selectView, setSelectView ] = useState('');
    const [ state, setState] = useState({

        isSubmitted: false
    })

    function handleChange(e) {
        let selectProd = e.target.value;
        setSelectProduct(selectProd);
    }
    function handleChangeView(e) {
        let selectVal = e.target.value;
        setSelectView(selectVal);
    }

    function handleSubmit(e) {
        e.preventDefault()
        setState({isSubmitted: true})
    }
    
    return (
        <div>
            <h1 className="heading">Product Review Page</h1>
            <h4 className="subHeading"> Check your Product's Review</h4>
            {/* Product ID */}
            <form onSubmit={handleSubmit}>
                <div className="form">
                    <div className="prod">
                        <label className="name">
                            Choose the Product ID{" "}
                            <span className="num">[between 1- 20]</span>:{" "}
                        </label>
                        <select
                            name="prod"
                            onChange={handleChange}
                            value={selectProduct}
                        >
                            {productID.map((num) => {
                                return (
                                    <Input
                                        key={num}
                                        name="productID"
                                        val={num}
                                    />
                                );
                            })}
                        </select>
                    </div>

                    <div>
                        {/* View ID */}
                        <label className="name">
                            Choose the Viewer ID{" "}
                            <span className="num">[between 1- 10]</span>:{" "}
                        </label>
                        <select
                            name="viewer"
                            onChange={handleChangeView}
                            value={selectView}
                        >
                            {viewID.map((num) => {
                                return (
                                    <Input
                                        key={num}
                                        name="viewerID"
                                        val={num}
                                    />
                                );
                            })}
                        </select>
                    </div>
                </div>
                <input className="button" type="submit" value="submit" />
            </form>

            { state.isSubmitted && <ProductPage product={selectProduct} viewer={selectView} /> }
        </div>
    );

Input is a Component to create the options.

I need to save the select values only after the submit, not every onChange, so that only submitted values are used in the API to get the response

function ProductPage(props) {

    const [ products, setProducts ] = useState({});
    let URL = `${baseURL}${props.product}/${props.viewer}`;

    useEffect(() => {
        async function api() {
            try {
                const response = await fetch(URL);
                return await response.json();
            } catch (error) {
                return console.log("Error :", error);
            }
        }
        api()
            .then((data) => setProducts(data))
            .catch((error) => alert("couldn't load data"));
    }, [URL]); 

    console.log(products);
    return (
        <div>
            <Product data={products}/> 
        </div>
    )
}

But first response is empty, therefore cannot use the value and later on its the previous response and the new response.

function Product(props) {
    console.log("data" + props.data);
    return (
        <div className="prodPage">
            <h4> Product Review</h4>
            <div className="content">
                <ul>
                    {/* <li>
                        {props.data.reviews[0].friend === true &&
                            `Name : ${props.data.reviews[0].reviewer.name}`}
                    </li>
                    <li>`Comment: ${props.data.reviews[0].comment} `</li> */}
                </ul>
            </div>
        </div>
    );
}

Please help me fix this

Screenshot of the response,