How could I achieve the state update effect in child components immediately? - reactjs

Question

This is just something I am playing with. Idea was to be able to import JSON data (users) from a remote location, display one user on each click of the button and also be able to delete a user with the delete button.
I have successfully imported JSON into my console and then have been able to show it onto the browser, been able to add users with a click of the button but, I am currently struggling with being able o delete users.
Along with the above, I also had a couple of side questions:
1)- Does creating multiple states affect negatively on the codes' performance in any ways?
2)- Could I have avoided creating count state? I tried with a local variable but that ends up loading from initial value each time the states change. I am sure there must be many ways. Recursion may be one of them which I have just thought of while typing my question and might see how to apply it.
3)- I ended up using id for val in my Blog component because I was failing to be able to access key attribute via event object in handleDel function. How could have I accessed key attribute and if there is any other better approach?
4)- In my count and counter states I tried different initial values but only the below values made the desired effect possible. Why is it so please?
Thanks in advance
import useFetch from './useFetch';
const Blog = ({counter, del}) => {
const {user} = useFetch();
return (
<div>
{
counter.map(val => (
<div key = {val} id={val}>
{user && <p>First name is : {user[val].firstName}</p>}
{user && <p>Last Name is : {user[val].lastName}</p>}
{user && <p>Age is : {user[val].age}</p>}
<button onClick = {del}>Delete</button>
</div>
))
}
</div>
)
}
export default Blog;
import Blog from './Blog';
import { useState } from "react";
const Home = () => {
const [count, setCount] = useState(1);
const [counter, setCounter] = useState([0])
const handleClick = () => {
setCount( count + 1 );
setCounter([...counter,...[count]]);
}
const handleDel = (e) => {
counter.splice(e.target.parentElement.id,1);
}
return (
<div>
hello from home
<button onClick = {handleClick}>Click for us to import a blog</button>
<Blog prp = {{count, counter}} del = {handleDel} />
</div>
)
}
export { Home };