fix: selected mark selection

src/components/MarkFormField/style.module.scss

@@ -138,6 +138,7 @@ button:active {
 .submitButton {
   width: 100%;
   max-width: 300px;
+  margin-top: 10px;
 }
 
 .footerContainer {

src/components/PDFView/PdfMarking.tsx

@@ -39,8 +39,13 @@ const PdfMarking = (props: PdfMarkingProps) => {
   const [selectedMarkValue, setSelectedMarkValue] = useState<string>('')
 
   useEffect(() => {
-    setSelectedMark(findNextIncompleteCurrentUserMark(currentUserMarks) || null)
-  }, [])
+    if (selectedMark === null && currentUserMarks.length > 0) {
+      setSelectedMark(
+        findNextIncompleteCurrentUserMark(currentUserMarks) ||
+          currentUserMarks[0]
+      )
+    }
+  }, [currentUserMarks, selectedMark])
 
   const handleMarkClick = (id: number) => {
     const nextMark = currentUserMarks.find((mark) => mark.mark.id === id)
@@ -60,8 +65,8 @@ const PdfMarking = (props: PdfMarkingProps) => {
       updatedSelectedMark
     )
     setCurrentUserMarks(updatedCurrentUserMarks)
-    setSelectedMark(mark)
     setSelectedMarkValue(mark.currentValue ?? EMPTY)
+    setSelectedMark(mark)
   }
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {