Interactive Card Details with React and Vite

This is my second challenge. This time I made a level jump to Junior. Personal observations: If this challenge had been done with html5, css and vanilla javascript, it would not have been complicated for me, however my goal is to practice react js, so I had the following complications: 1 When creating the component for the input, I decided to do a slightly different design than the challenge, but I ran into the problem that for some reason I can't initialize in EventListener("focus"), before I have to use the Input first, this causes the initial animation when focusing on the input to not work.

    if(input) {
        input.addEventListener("focus", () => {
            setActive(true)
            if(focus === "front")
                frontActive(true)
            else
                frontActive(false)
        })
    
        input.addEventListener("blur", () => {
            if(input.value === "") {
                setActive(false)
                input.parentElement.classList.add("required")
            } else {
                input.parentElement.classList.remove("required")
            }
            
            if(focus === "front")
                frontActive(true)
            else
                frontActive(false)
        })
    }```

If anyone knows the solution to this problem, you can comment and I will follow the instructions. 

Greetings!!.