Action Drawer Form - Copy this React, Tailwind Component to your project

Help-me-complete-translation-in-my-code-here-is-the-JSON-file-dont-modify-anything-just-add-new-keys-for-every-text-{-"title":-"Risks",-"riskSeverityChipLabel":-"{severity}-Risks",-"severity":-"Severity",-"riskDetails":-"Risk-Details",-"riskSummaryMessages":-{-"critical":-"Some-risks-need-urgent-attention!",-"high":-"Some-risks-need-attention!",-"low":-"Risks-look-good!"-},-"tabs":-{-"all":-"All",-"vulns":-"Vulnerabilities-(CVE)",-"assets":-"Assets"-},-"remediation":-"Remediation",-"assignedTo":-"Assigned-To",-"unassigned":-"Unassigned",-"dueDate":-"Due-Date",-"firstTimeDetected":-"First-Time-Detected",-"lastTimeDetected":-"Last-Time-Detected",-"viewRisk":-"View-Risk",-"updateRisk":-"Update-Risk",-"na":-"N/A",-"notifications":-{-"requestFailed":-"Request-Failed",-"error":-"There-was-an-issue-fetching-risks.-Please-try-again.",-"unknownError":-"An-unknown-error-occurred."-},-"riskSeverity":-{-"critical":-"Critical",-"high":-"High",-"medium":-"Medium",-"low":-"Low"-},-"riskState":-{-"inbox":-"Inbox",-"acknowledged":-"Acknowledged",-"in_progress":-"In-Progress",-"accepted":-"Accepted",-"false_positive":-"False-Positive",-"fixed":-"Fixed",-"mitigated":-"Mitigated"-},-"riskStatus":-{-"resolved":-"Resolved",-"unresolved":-"Unresolved"-},-"riskSource":-{-"agent":-"Agent",-"eva":-"EVA",-"iva":-"IVA"-},-"riskResolutionType":-{-"scan":-"Scan",-"asset_deleted":-"Asset-Deleted",-"stale":-"Stale"-}-}-Below-is-my-code-where-you-need-to-translate-the-plain-texts-import-React-from-'react';-import-{-Button,-Item,-Select-}-from-'@rtkwlf/fenrir-react';-import-{-useForm,-Controller-}-from-'react-hook-form';-import-{-Autocomplete,-Box,-FormControlWrapper,-MenuItem,-OutlinedInput,-Stack,-}-from-'@packages/fenrir/components';-import-{-useRiskOptions-}-from-'../../pages/risks/use-risks-options/use-risks-options';-import-{-useActionDrawer-}-from-'./action-drawer-context';-type-FormValues-=-{-state:-string;-assignedTo:-{-label:-string;-value:-string-}-|-null;-dueDate:-string;-};-const-ActionDrawerForm-=-()-=>-{-const-{-closeDrawer-}-=-useActionDrawer();-const-selectedRisksCount-=-1;-const-{-riskStateOptions-}-=-useRiskOptions();-const-{-control,-handleSubmit,-reset,-formState:-{-isDirty-},-}-=-useForm<FormValues>({-defaultValues:-{-state:-'',-assignedTo:-null,-dueDate:-'',-},-mode:-'onChange',-});-const-onSubmit-=-(data:-FormValues)-=>-{-console.log(data);-//-Handle-form-submission-};-const-handleClear-=-()-=>-{-reset();-closeDrawer();-};-return-(-<Box-padding={4}>-<Stack-direction="row"-justifyContent="space-between"-alignItems="center"-marginBottom={4}->-<Item>-<Item-style={{-fontSize:-'18px',-fontWeight:-'700'-}}>-Update-Risks-</Item>-</Item>-<Item-onClick={closeDrawer}-style={{-cursor:-'pointer'-}}>-Close-</Item>-</Stack>-<span>{selectedRisksCount}-Risk(s)-selected.</span>-<p>-The-current-information-on-all-selected-risks-will-be-overwritten-with-the-following-changes.-</p>-<form-onSubmit={handleSubmit(onSubmit)}>-<Stack-spacing={3}>-<FormControlWrapper-id="action-state"-label="State"-sx={{-width:-'100%'-}}->-<Controller-name="state"-control={control}-render={({-field-})-=>-(-<Select-{...field}-id="action-state"-input={<OutlinedInput-/>}-label="State"->-{riskStateOptions.map((option)-=>-(-<MenuItem-key={option.value}-value={option.value}>-{option.label}-</MenuItem>-))}-</Select>-)}-/>-</FormControlWrapper>-<FormControlWrapper-id="action-assigned-to"-label="Assigned-To"-sx={{-width:-'100%'-}}->-<Controller-name="assignedTo"-control={control}-render={({-field:-{-onChange,-value-}-})-=>-(-<Autocomplete-id="action-assigned-to"-value={value}-onChange={(_,-newValue)-=>-onChange(newValue)}-options={riskStateOptions}-getOptionLabel={(option)-=>-option.label}-renderInput={(params)-=>-(-<OutlinedInput-{...params}-placeholder="Assigned-To"-/>-)}-isOptionEqualToValue={(option,-value)-=>-option.value-===-value?.value-}-/>-)}-/>-</FormControlWrapper>-<FormControlWrapper-id="action-due-date"-label="Due-Date"-sx={{-width:-'100%'-}}->-<Controller-name="dueDate"-control={control}-render={({-field-})-=>-(-<OutlinedInput-{...field}-type="date"-id="action-due-date"-placeholder="Select-Due-Date"-/>-)}-/>-</FormControlWrapper>-<Stack-direction="row"-spacing={2}-justifyContent="flex-end"-marginTop={2}-alignItems="center"->-<Item-onClick={closeDrawer}-style={{-cursor:-'pointer'-}}>-Cancel-</Item>-<Button-type="submit"-isDisabled={!isDirty}>-Submit-</Button>-</Stack>-</Stack>-</form>-</Box>-);-};-export-default-ActionDrawerForm;