I get Uncaught TypeError: Cannot read properties of null (reading 'style') when this code doesn't pass. Im not sure why the properties are null

Question

I keep getting this error I tried changing the div to a span or another html element but that didnt work. I'm going to have the "no-link-show" div pop up under the input box if the code doesn't pass the regex. The classlist will get added to the input, but the "no-link-show" div which is set to display : none is supposed to change to block but it does not. I thought it was a side effect of react and tried to use useEffect but then I got the error that I was not using the hook properly. The div is in the jsx I dont know why the property is coming up as null.

import React from "react"

export default function Form() {
    
    function shortenLink(event) {       
        event.preventDefault()  

        
     const regexp =  /^(?:(?:https?|ftp):\/\/)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:\/\S*)?$/;
        if (regexp.test(input.value))
        {
         fetch(`https://api.shrtco.de/v2/shorten?url=${input.value}`)
        .then(res => res.json())
        .then(data => console.log(data))
        }
        else
        {
                    document.getElementById("input").classList.add('noLink') 
**Here this keeps showing up as null, when I dont know why. the DOM element is in the jsx**
                    document.querySelector("no-link-show").style.display = "block"
        }
        
    }
    
    return (
            <form id="form" onSubmit={shortenLink}> 
                    <input 
                    id="input"
          type="text"
                    name="link"
                    className='input'
                    placeholder="Shorten a link here..."
                /> 
            <div className="no-link-show"> Please add a link </div>
            <button>Shorten It</button>
        </form>
    )
}