searchpaper | given keywords and paper list url | Search Engine Optimization library

I'm creating a React web application with Material-UI, and I'm running into a problem where my Material-UI DataGrid always steals the browser focus away from my search input field as I try to type in it. This problem does not occur right when I load the page. It only happens when I first click somewhere on the table to focus on it, and then click on the search bar and try to type something. Right as I type the first letter and the state of my page is updated, the focus goes to a cell on my table so I can no longer type in my search box without clicking on it again (and then the process repeats for each letter I type).

From my research, a lot of people have run into this issue because they are not putting proper keys on their React elements, so they lose focus on their input field whenever the state of the page changes. However, I've made sure to include keys on all elements that have sibling elements, which should take care of that from my understanding. I have also included the line: onKeyDown={(e) => e.stopPropagation()} in my InputBase field because I read on another Stack Overflow post that sometimes the DataGrid can intercept KeyDown events, but that didn't help either.

Snippet to make the issue clearer (zoomed in on top left of table + search bar)

Here is all the JavaScript code that encompasses my problem: