React component renderes twice (useeffect runs twice) [duplicate]

Hi i'm new to react js and i was wondering why my component is rendering twice(useeffect runs twice). I tried removing strict mode and it renders only once but even then i don't understand why count is shown as 01 instead of just only 1. if i add the event handler the component breaks and i get that newarray[id][1]-1 is undefined (the function runs even if i don't click - or +)

import React, { useEffect, useState } from "react"; import { useOutletContext } from "react-router-dom"; function ShoppingCart(prop) { const [productstobuy, setProducts] = useState([]); const [count, setCount] = useState([0]) console.log(productstobuy) /* const handlePlusMinus = (sign,id) => { console.log("i'm in") const newarray = [...productstobuy] console.log(newarray) if (sign === "+") { newarray[id][1] = newarray[id][1]+1 } else if ((newarray[id][1]-1) >= 1) { newarray[id][1] = newarray[id][1]+1 } setProducts(newarray); } */ const allItems = useOutletContext() useEffect(() => { setCount(count + 1) console.log("called") let toadd = allItems.filter((elem, index) => { return index === prop.index }) console.log(toadd); let productexsist = productstobuy.filter((elem) => { return elem[0] === toadd }) console.log(productexsist.length) if (!productexsist.length) { console.log([(allItems.filter((elem, index) => { return index === prop.index }))[0], 1]) setProducts(oldArray => [...oldArray, [toadd[0], 1]]); console.log(productstobuy) } else { console.log("wrong") } }, [prop.index]) return ( <div> {count} {console.log(productstobuy)} {productstobuy.length > 0 ? productstobuy.map((product) => { console.log(product[1]) return (<div className="product" id={prop.index}>{product[0]}<div><button id={prop.index} /*onClick={handlePlusMinus("-",prop.index)}*/>-</button><input type="number" value={product[1]} /><button id={prop.index} /*onClick={handlePlusMinus("-",prop.index)}*/>+</button></div></div>) }) : null} </div> ); } export { ShoppingCart }