The align property of text doesn't work at all

[eito1011-JP]

I wanna make the validation message below align right. but it doesn't work and stays centered. I tried setting other properties like decoration or fontSize toward the Text tag. and these worked. does somebody know why it doesn't work?

 return (
        <Flex align="center" justify="center" height="100vh">
            <Box bg="white" w="md" p={30} pb={20} borderRadius="md" shadow="md">
                <VStack>
                    <Heading as="h1" size="md">
                        パスワードをお忘れの方
                    </Heading>
                    <FormControl isInvalid={error}  textAlign="center">
                        <Stack spacing={1}>
                            <Text>ご利用中のメールアドレスを入力してください</Text>
                            <Text>パスワード再設定のためのURLをお送りします</Text>
                        </Stack>
                        <VStack spacing={4} mt={8} mb={-8}>
                            <Input placeholder="mail@example.com" mt={-1} mb={10} value={email} onChange={onChangeEmail} />
                            <FormErrorMessage className="errorMessage" mt={-10}>
                                {Object.entries(validationErrors).map(([key, messages]) => (
                                    <VStack key={key} spacing={-1}>
                                        {messages.map((message) => (
                                            <Text key={message} fontSize="xs" align="start" decoration="underline">
                                                {message}
                                            </Text>
                                        ))}
                                    </VStack>
                                ))}
                            </FormErrorMessage>
                            <PrimaryButton onClick={sendResetMail} width="2xs">
                                送信する
                            </PrimaryButton>
                            <BackButton onClick={() => navigate(-1)} width="2xs">
                                戻る
                            </BackButton>
                        </VStack>
                    </FormControl>
                </VStack>
            </Box>
        </Flex>
    );