Не могу понять что и где передать в данном случае чтоб заработал елемент

Имеем компонент ошибки:

import React from 'react';
import cn from 'classnames';
import styles from './error.module.scss';
import { Field, ErrorMessage } from 'formik';

const Error = ({ name, placeholder, ...rest }) => {
  const error = cn(styles.error, {
    [styles.errorLogin]: window.location.pathname === '/',
    [styles.errorSignUp]: window.location.pathname === '/sign-up',
  });
  return (
        <ErrorMessage name={name} component='span' className={error} {...rest} /> 
  );
};

export default Error;

Также имеем элемент инпута:

import React from 'react';
import cn from 'classnames';
import styles from './input.module.scss';
import { Field, ErrorMessage } from 'formik';
import Error from "../Error"

const Input = ({ name, placeholder, ...rest }) => {
  return (
    <label style={{ position: 'relative' }}>
      <Field name={name}>
        {({ field, meta }) => {
          const classNames = cn(styles.input, {
            [styles.validInput]: meta.touched && !meta.error,
            [styles.errorInput]: meta.touched && meta.error,
            [styles.inputLogin]: window.location.pathname === '/',
            [styles.inputSignup]: window.location.pathname === '/sign-up',
          });
          return (
            <input
              type='text'
              className={classNames}
              placeholder={placeholder}
              {...field}
            />
          );
        }}
      </Field>
      <Error />        <------вот здесь вставить
    </label>
  );
};

export default Input;

Нужно вставить один в другой, на данный момент выдает ошибку Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead

Пробовала взять все это дело инпута в массив, но не работает, видимо что-то не понимаю в синтаксисе.

Как будет правильно?