<div className="flex justify-between items-center">
          <div>
            {data.carType === "manual" ? (
              <div>
                <GrManual className="text-2xl text-gray-500" />
              </div>
            ) : (
              <div>
                {" "}
                <PiSteeringWheelBold className="text-2xl text-gray-500" />
              </div>
            )}
          </div>
          <div>
            {data.fuelType === "electric" ? <GiElectric /> : <FaGasPump />}
          </div>
          <div>hi</div>
        </div>

this is causing a hydration error , anyone knows whats the mistake