I have a problem , could not find react-redux context value

I’m trying to make a project with React, I don’t have much knowledge, so I’m sorry, I’m getting this error and I couldn’t solve it. Thank you for your help.
could not find react-redux context value; please ensure the component is wrapped in a

app.js 

function App() {
  
  return (
    <div className="App">
      <Routes>
        <Route path='/*' element={<CostumerRouters/>}></Route>

      </Routes>
      


      
    </div>
  );
}

export default App;



index.js 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider store={store}>
        <App />

      </Provider>
    </BrowserRouter>

  </React.StrictMode>
);reportWebVitals();

store.js 


import { legacy_createStore, applyMiddleware, combineReducers } from "redux";
import { thunk } from "redux-thunk";
import { authReducer } from "./Auth/Reducer";
import { customerProductReducer } from "./Product/Reducer";
import { cartReducer } from "./Cart/Reducer";
import { orderReducer } from "./Order/Reducer";

const rootReducers = combineReducers({
    auth:authReducer,
    products:customerProductReducer,
    cart:cartReducer,
    order: orderReducer,


})

export const store = legacy_createStore(rootReducers,applyMiddleware(thunk))



end product.jsx


import { Fragment, useEffect, useState } from 'react'
import { Dialog, Disclosure, Menu, Transition } from '@headlessui/react'
import { XMarkIcon } from '@heroicons/react/24/outline'
import { ChevronDownIcon, FunnelIcon, MinusIcon, PlusIcon, Squares2X2Icon } from '@heroicons/react/20/solid'
import { products } from './Products'
import ProductCard from './ProductCard'
import { useLocation, useNavigate, useParams } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { findProducts } from '../../State/Product/Action'

import { Pagination } from '@mui/material'
import { store } from '../../State/store'


function classNames(...classes) {
  return classes.filter(Boolean).join(' ')
}

export default function Product() {
  const dispatch = useDispatch()
  const { products } = useSelector(state => state.products);
  const { product } = products; // Eğer 'product' direkt store üzerinde ise böylece kullanabilirsiniz

  const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false)
  const location = useLocation()
  const navigate = useNavigate()
  const param = useParams()

  const decodeQueryString = decodeURIComponent(location.search);
  const searchParams = new URLSearchParams(decodeQueryString);
  const colorValue = searchParams.get("color")
  const sizeValue = searchParams.get("size")
  const priceValue = searchParams.get("price")
  const discount = searchParams.get("discount")
  const sortValue = searchParams.get("sort")
  const pageNumber = searchParams.get("page") || 1;
  const stock = searchParams.get("stock")


  const handlePaginationChange = (value) => {
    const searchParams = new URLSearchParams(location.search)
    searchParams.set("page", value);
    const query = searchParams.toString();
    navigate({ search: `?${query}` })

  }


  const handleFilter = (value, sectionId) => {
    const searchParams = new URLSearchParams(location.search)
    let filterValue = searchParams.getAll(sectionId)
    if (filterValue.length > 0 && filterValue[0].split(",").includes(value)) {
      filterValue = filterValue[0].split(",").filter((item) => item !== value)
      if (filterValue.length === 0) {
        searchParams.delete(sectionId)
      }
    }
    else {
      filterValue.push(value)
    }
    if (filterValue.length > 0) {
      searchParams.set(sectionId, filterValue.join(","))

    }
    const query = searchParams.toString()
    navigate({ search: `?${query}` });
  }

  useEffect(() => {
    const [minPrice, maxPrice] = priceValue === null ? [0, 10000] : priceValue.split("-").map(Number);
  
    const data = {
      category: param.levelThree,
      colors: colorValue || [],
      sizes: sizeValue || [],
      minPrice,
      maxPrice,
      minDiscount: discount || 0,
      sort: sortValue || "price_low",
      pageNumber: pageNumber - 1,
      pageSize: 10,
      stock: stock
    };
  
    dispatch(findProducts(data));
  }, [dispatch, param.levelThree, colorValue, sizeValue, priceValue, discount, sortValue, pageNumber, stock]);
  
}

Despite my research, I couldn’t find any method.
I have to do frontend for my backend project, so I don’t have much knowledge, I’m just learning. Can you please show me a solution in a way that I can understand?