«Почему` scrollintoview () не работает при нажатии на результат поиска, чтобы прокрутить соответствующий продукт в основ ⇐ Javascript

[Anonymous]

React SearchBar: прокрутите, чтобы нажать продукт, не работающий < /h2>
Я пытаюсь создать строку поиска, которая фильтровала продукты и прокрутки в выбранном продукте при нажатии. Однако прокрутка не работает . Элемент не прокручивается в представлении, когда я нажимаю на результат поиска.
Что я попробовал

• Использую USEREF (new Map ()) для динамического сохранения продуктов. handleproductclick .
• Добавлен useeffect для сброса ссылок, когда продукты изменение.

ожидаемое поведение

• Когда я кликну в результате поиска>. view.

Actual Behavior

• Clicking a search result does not scroll to the product.

My Code
import { useState, useRef, useEffect } from "react";
import searchIcon from "../assets/icons/search-icon.png";

const SearchBar = ({ products }) => {
const [query, setQuery] = useState("");
const filteredProducts = products.filter((product) =>
product.name.toLowerCase().includes(query.toLowerCase())
);

const productRefs = useRef(new Map()); // Store refs using Map()

useEffect(() => {
productRefs.current = new Map(); // Reset refs when list updates
}, [products]);

const handleProductClick = (id) => {
const element = productRefs.current.get(id); // Get element from Map
if (element) {
element.scrollIntoView({
behavior: "smooth",
block: "center",
});
}
setQuery(""); // Clear search
};

return (

setQuery(event.target.value)}
/>



{query && filteredProducts.length > 0 && (

• {filteredProducts.map((product) => (
• key={product.id}
  ref={(el) => productRefs.current.set(product.id, el)} // Store ref in Map
  className="p-2 w-70 md:w-full flex items-center gap-2 md:gap-5 max-h-8 md:max-h-10 text-sm md:font-semibold cursor-pointer mt-4 duration-200 hover:opacity-80"
  onClick={() => handleProductClick(product.id)}
  >
  {product.name} -
  
  
  ))}

)}

);
};

export default SearchBar;


Подробнее здесь: https://stackoverflow.com/questions/795 ... -scroll-to