Toastify icons are large and not in the toast popup

[krowvin]

If I create the following form:

 <CWMSForm
      office={OFFICE}
      cdaUrl={CDA_URL}
      className="my-4"
      storeRule="REPLACE_ALL"
      calendarLabel="LOWER RED RESERVOIR REPORT FOR"
      calendarInterval="day"
      resetOnSubmit={false}
      calendarSnapTo="previous"
    > {/* Extra removed */}
          {PROJECTS.map((project) => {
            return <ReleaseDataRow key={project} project={project} time={time} />
          })}
      </UsaceBox>
    </CWMSForm>

With ReleaseDataRow as:

// extra removed, component called ReleaseDataRow that dynamically decides to use a CWMSInput or another label
<CWMSInput
        AllowMissingData
        type="text"
        tsid={isTimeseries ? tsid : undefined}
        className={`w-24 text-center  ${className ?? ""}`}
        name={`${project}_${isTimeseries ? "ts" : "level"}`}
        label={label ?? name}
        units={resolvedUnits}
        timeOffset={timeOffset}
        title={timestamp ? `${name} @ ${dayjs(timestamp).format("MM/DD/YYYY HH:mm:ssZZ")}` : name}
        defaultValue={`${
          value === undefined || value === null ? "" : Number(value).toFixed(precision)
        }`.trim()}
      />

I get the following when I hit submit:

If I add this line to my main.jsx, it works and I see this
import "react-toastify/dist/ReactToastify.css"
Added after index.css

I noticed we have this ReactToastify.css line here:

groundwork-water/lib/components/data/forms/helpers/ToastProvider.jsx

Line 3 in f455ee1

import "react-toastify/dist/ReactToastify.css";

Not sure why I needed to add it again?