So I am rendering a map:

{categories.map((category, index) => {

and inside this map I am rendering another:

{challenges.map((challenge, index) => {

and they all render correctly but for example once I delete a challenge and call the getChallenges() (gets the challenges from server) which is what I also call at the first render with useEffect() it renders the categories properly but the challenges map inside the categories map gets doubled so I have the old & new ones. Anyway to prevent this or any way I can render the categories map and then the challenges map appending them to their correct category? Thanks for your help in advance I hope I was clear!