by default use first option when exporting to image

src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageFormat/ImageFormat.component.tsx

@@ -4,7 +4,8 @@ import {
   loadingConfigurationMainSelector,
 } from '@/redux/configuration/configuration.selectors';
 import { useAppSelector } from '@/redux/hooks/useAppSelector';
-import { useContext } from 'react';
+import { useContext, useState } from 'react';
+import { CheckboxItem } from '@/components/Map/Drawer/ExportDrawer/CheckboxFilter/CheckboxFilter.types';
 import { CheckboxFilter } from '../../CheckboxFilter';
 import { CollapsibleSection } from '../../CollapsibleSection';
 import { ExportContext } from '../ExportCompound.context';
@@ -23,6 +24,16 @@ export const ImageFormat = (): React.ReactNode => {
       label: name,
     }));
 
+  const options = useState<CheckboxItem[]>(mappedElementAnnotations);
+  if (
+    !isPending &&
+    currentImageFormats.length === ZERO &&
+    options.length > ZERO &&
+    options[ZERO].length > ZERO
+  ) {
+    setImageFormats([options[ZERO][ZERO]]);
+  }
+
   return (
     <CollapsibleSection title="Image format">
       {isPending && <p>Loading...</p>}