Focus the last element of a map html rendering - reactjs

Question

In my react typescript project, I have a component which generates multiple div with the same id when I map through it.
<div id="projectName" ref={ref} contentEditable="true" className="font-semibold focus:outline-none resize-none">{projectTitle}</div>
<div id="projectName" ref={ref} contentEditable="true" className="font-semibold focus:outline-none resize-none">{projectTitle}</div>
<div id="projectName" ref={ref} contentEditable="true" className="font-semibold focus:outline-none resize-none">{projectTitle}</div>
My goal is to set the focus on the last element of it when I click on my button. For that, I tried to use a method I found on another stack, but I can't have access to the focus() method like they use in the post.
I don't really know how I could process this.
var size = document.querySelectorAll("[id=projectName]")
var last = size[size.length - 1]
last.focus() // error here
The error is the following one
Property 'focus' does not exist on type 'Element'.

Answer 1

Instead of using querySelector(), please try to use refs when it comes to react. I see you are trying to do that but didn't implement fully.
export default function App() {
let list = [1, 2, 3, 4, 5];
let elRefs = useRef([]);
useEffect(() => {
let size = elRefs.current.length;
elRefs.current[size - 1].focus();
});
return (
<div className="App">
{list.map((x) => (
<div
id="projectName"
tabIndex="1"
ref={(el) => (elRefs.current = [...elRefs.current, el])}
key={x}
contentEditable="true"
className="font-semibold focus:outline-none resize-none"
>
x
</div>
))}
</div>
);
}
Pass in a function to ref and keep appending to the .current array. And yes as mentioned you have to use tabIndex to make non focusable items focusable.
Code sandbox link