Why does my code create a new empty array?

Your problem is related to the asynchronous nature of the hooks.

In onSubmit function, you are setting todos using setTodos hook (that is async) and then you are reading todos value (to store it into firebase).

You can't write this code in an async context! Infact, could be that todos will be read before hook setted him (and the result will be that not all the data will be stored into firebase).

To solve this bug you have to use useEffect hook in this way:

const Practice = () => {
    const [todo, setTodo] =useState("");
    const [todos,setTodos]=useState([])

    useEffect(() => {
        // 1) define an async function in useEffect hook
        const storeData = async () => {
           try {
            const docRef = await addDoc(collection(db, "todos"), {
              todos,
            });
            console.log("Document written with ID: ", docRef.id);
          } catch (e) {
            console.error("Error adding document: ", e);
          }
        }

        // 2) reset todo
        setTodo("");
        // 3) store todos into firebase
        storeData();

    }, [todos]);

    const onSubmit =async(event) =>{
        event.preventDefault();
        setTodos((currnet)=>[todo, ...currnet]);
    }
    const onChange = (event)=>{
        setTodo(event.target.value)
    }
  return (
    <>
        <form onSubmit={onSubmit}>
            <input onChange={onChange} value={todo} type="text" placeholder="Write" />
            <input type="submit" value="GO!!" />
        </form>
    </>
  )
}

Explanation:

1. onSubmit function needs just to set todos (no further action required);
2. When todos changes, useEffect hook will be called (only at this time you are 100% sure that todos will contain all the elements you have to store into firebase!);
3. Now in useEffect you can clean todo and then call storeData function to store todos into firebase.

Additional note: why I defined an async function in useEffect if I could write something like:

useEffect(async () => {    // never use async useEffect!!!
  try {
     const docRef = await addDoc(collection(db, "todos"), {
        todos,
     });
     console.log("Document written with ID: ", docRef.id);
  } catch (e) {
      console.error("Error adding document: ", e);
  }
}, [todos])

There is a reason why you can't write async useEffect but I'm not an expert so I strongly suggest you to read this article.