this is my productSlice.js and used @reduxjs/toolkit were i created a slice of BaseUrl which can be used insted of axios

after using slices getting this syntax error
of SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON it sending my HTML page i think

also having some issue withredux toolkit while fetching data for single productID

import { PRODUCT_URL } from "../src/constant";
import { apiSlice } from "./apiSlice";

export const productApiSlice = apiSlice.injectEndpoints({
    endpoints: (builder) => ({
        getProductDetails: builder.query({
            query: (productId) => ({
                url: `${PRODUCT_URL}/${productId}`,
            }),
            keepUnusedDataFor: 5,
        }),
    }),
});

export const {useGetProductDetailsQuery } = productApiSlice;

ProductScreen.js

import { Link, useParams } from 'react-router-dom'

import { useGetProductDetailsQuery } from '../../slices/productApiSlice';


const ProductScreen = () => {
    const { id: productId } = useParams();

    const { data: product, isLoading, error } = useGetProductDetailsQuery(productId);

    return (

        <>
            <Link className='btn btn-light mb-3' to="/">
                <HiArrowCircleLeft /> Go Back
            </Link>

            {isLoading ? (
                <h1>Loading...</h1>
            ) : error ? (
                <div>{error?.data?.message || error.error}</div>
            ) : (
                <Row>
                    <Col md={5}>
                        <Image src={product.image} alt={product.name} fluid />
                    </Col>

                    <Col md={4}>
                        <ListGroup variant='flush'>
                            <ListGroupItem>
                                <h3>{product.name}</h3>
                            </ListGroupItem>
                            <ListGroupItem>
                                <Rating
                                    value={product.rating}
                                    text={`${product.numReviews} reviews`}
                                />
                            </ListGroupItem>
                            <ListGroupItem>
                                Price:${product.price}
                            </ListGroupItem>
                            <ListGroupItem>
                                Desciption:`{product.description}
                            </ListGroupItem>
                        </ListGroup>
                    </Col>

                    <Col md={3}>
                        <Card>
                            <ListGroup variant='flush'>
                                <ListGroupItem>
                                    <Row>
                                        <Col>Price:</Col>
                                        <Col>${product.price}</Col>
                                    </Row>
                                </ListGroupItem>
                                <ListGroupItem>
                                    <Row>
                                        <Col>Status:</Col>
                                        <Col>{product.countInStock > 0 ? "In the stock" : "Out of Stock"}</Col>
                                    </Row>
                                </ListGroupItem>
                                <ListGroupItem>
                                    <Button
                                        className='btn-block'
                                        type='submit'
                                        disabled={product.countInStock === 0}
                                        onClick={swal}
                                    >
                                        Add to Cart
                                    </Button>
                                </ListGroupItem>
                            </ListGroup>
                        </Card>
                    </Col>
                </Row>
            )}

        </>
    )
}

export default ProductScreen

provide me a solution to resolve this error and that can successfully able to fetch data from Redux