I keep running in to this error, the code works fine in plain react but in typescript it keeps throwing this error "Object is possibly null". I tried countering it using "!" but it didn't help.

second error in the log says "cannot read properties of null reading (textContent)"

I set this to false

"strictNullChecks": false,

Here is a sandbox - https://codesandbox.io/s/sweet-mclean-nrhcdq?file=/src/App.tsx

This is the fetch api call -

const [isLoading, setLoading] = useState(false);
  //storing data
  const [data, setData] = useState(false);

  //fetching data
  useEffect(() => {
    setLoading(true);

    const fetchList = async (): Promise<UsersList> => {
      const result: any = await fetch("https://randomuser.me/api/?results=20")
        .then((res) => res.json())
        .then((data) => {
          setData(data);
          setLoading(false);
          console.log(data);
          
        });
        
      return result;
    };
    fetchList();
    
    
  }, []);

This is the code that is causing me the problem, is there a better way of doing this? someone mentioned useref but im not sure how to implement it with a fetch call in useEffect.

The desired output is for any text that includes Miss to have a blue background.

const h2 = window.document.getElementById("person")!
  h2.innerHTML = h2.textContent!.replace(/[Miss]/g, "<span class='title'>Miss</span>");

.title {
background-color: blue;
}

Later in the html I have filtered and mapped through the data -

<div style={hoverStyle} className="grid grid-cols-4 gap-2 p-2 mt-20">
        {data?.results.filter((val: any)=>{
          if (searchUser === "") {
            return val
          } else if (val.name.first.toLowerCase().includes(searchUser.toLowerCase())) { 
              return val          
          } else if (val.email.toLowerCase().includes(searchUser.toLowerCase())){
            return val
          } else if 
            (val.location.city.toLowerCase().includes(searchUser.toLowerCase())){
              return val
            } 
        }).map((d: any) => (
              
          <div style={hoverStyle} className=" ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300  border-white shadow-slate-500 bg-white hover:opacity-95 rounded-lg container p-5">
            <img className="rounded-full w-44 h-44 " src={d.picture.large} />
            <h2 id="person" >{d.name.title}</h2>

Any ideas?