Username.js не показывает желаемый результат (используя MERN для проекта) ⇐ CSS

[Anonymous]

Следующий код (файл Username.js) является частью приложения аутентификации пользователя, которое я создаю с помощью MERN.
Я не могу сделать свою страницу имени пользователя такой, как прикрепленная отображается изображение:



Желаемый результат
Фактический результат







< img alt="фактический результат" src="https://i.sstatic.net/AJho5S38.png" />



Есть ли проблемы в моем коде? :
import React from 'react'
import { Link } from 'react-router-dom'
import avatar from '../assets/profile.png';
import { Toaster } from 'react-hot-toast';
import { useFormik } from 'formik';
import { usernameValidate } from '../helper/validate';

import styles from '../styles/Username.module.css';

export default function Username() {

const formik = useFormik({
initialValues : {
username : ''
},
validate: usernameValidate,
validateOnBlur: false,
validateOnChange: false,
onSubmit: async values => {
console.log(values)
}
})

return (

Hello Again!

Explore more by connecting with us.







Let's Go

Not a Member? Register Now





)
}


Подробнее здесь: https://stackoverflow.com/questions/787 ... he-project