Can’t get a input value using typescript and use it, how to fix?

This is my code, but I can’t get it to work, i’m using react and typescript(i’m new to both), i don’t know what i’m doing wrong, it always says: Uncaught TypeError: Cannot read properties of null(reading ‘value’). What I did wrong?

==================================/ /============================

import { Button } from "./components/ui/button"
import { Input } from "./components/ui/input"

function App() {
  const inputElement = document.getElementById('bla') as HTMLInputElement.value;
  console.log(inputElement)

  return (
    <>
    <div className="p-6 space-y-6">
      <div className="flex justify-center">
        <div className="flex justify-between w-1/2">
          <h1 id="bla">bla bla bla</h1>
          <Input id="pokemonInput" placeholder="Pokemon name" className="border rounded w-1/2"/>
          <Button>Pesquisar</Button>
        </div>
      </div>

      <div className="flex justify-center">
        <img src="" id="pokemonImage" className="border rounded w-1/2"/>
      </div>
    </div>
    <script type="module" src="./src/script.ts"></script>
    </>
  )
}



export default App

It should get the string ‘bla bla bla’ and console.log it but I can’t get the property ‘value’, no matter what.