Hi can anyone help me solve these validators problem. I have put validators for the input fields in an update page but the problem is, it shows validation to all the field that are not touched but the output i want is to show the validators when the field is empty or edited to wrong format.

This is the code..(not full part,only the required one)

const EditRow = () => {
    const { data: session } = useSession();
    const [portfoliosById, setPortfoliosById] = useState([]);
    const [sessionPage, setSessionPage] = useState(null);
    const { toast, portfolioId, setEditRow, currentPage } = useContext(PortfoliosContext);
    const { data: dataPortfolio } = useEditRow(sessionPage, portfolioId, currentPage);
    const [visible, setVisible] = useState(false);
    const [nameEn, setNameEn] = useState("");
 



    const formik = useFormik({
        initialValues: {
            portfolio_name_en: portfoliosById.Portfolio_Name_EN,
                  },

        validate: (data) => {
            let errors = {};
            if (!data.portfolio_name_en) {
                errors.portfolio_name_en = "Portfolio name in english is required";
            }

            return errors;
        },
        onSubmit: () => {
            
        }
    });       

    const isFormFieldValid = (name) => !!(formik.touched[name] && formik.errors[name]);
    const getFormErrorMessage = (name) => {
        return isFormFieldValid(name) && <small className="p-error">{formik.errors[name]}</small>;
    };


    useEffect(() => {
        setSessionPage(session);
    }, [session])

    useEffect(() => {
        displayRowData(dataPortfolio)
    }, [dataPortfolio])

    const displayRowData = (data) => {
        if (data.Portfolio_Details) {
            setPortfoliosById(data.Portfolio_Details);
        }
    }

    const backToList = () => {
        setEditRow(false);
    }

    return (
        <>
            <Toast ref={toast} position="top-center" />
            <div className="grid">
                <div className="col-12">
                    <div className="card">
                        <h5>Edit Portfolio</h5>
                        <div className="parent">
                            <div>
                                <Button onClick={backToList} type="button" icon="pi pi-chevron-left" label="Back to List" className="mr-2" style={{ width: "100%", fontSize: "16px" }} />
                            </div>
                            <div className="card" style={{ width: "87%", background: "rgb(180, 184, 230)", marginLeft: "20px" }}>
                                <form onSubmit={formik.handleSubmit}>
                                    <div className="text-box-portfolios" style={{ display: "flex" }}>
                                    <p style={{ fontSize: "16px", width: "20%", paddingTop:  10px  }}><b>Name (EN) :</b></p>
                                        <div style={{ width: "100%", paddingLeft: "30px" }}>
                                            <InputText id="portfolio_name_en"  value={portfoliosById.Portfolio_Name_EN} name="portfolio_name_en" /* onChange={formik.handleChange} */  style={{ width: "80%" }} />
                                            <div>
                                                {getFormErrorMessage( portfolio_name_en )}
                                            </div>
                                        </div>
                                    </div>