Несколько входов

Question

Я хочу установить сообщение об ошибке в моих полях ввода, если значение недопустимо. Сообщение всегда будет одинаковым. Но сообщение отображается в каждом поле ввода, если значение недопустимо. Это лог c, если вы видите код. Но как я могу заставить это работать?

И да, я должен использовать состояние ошибки в родительском компоненте, потому что я поднял состояние. Из-за стилевых зависимостей ошибки проп. Для этого я использую styleled-компоненты.

Родительский компонент:

const List = (props) => {
  const [error, setError] = useState('');

  function handleChange(event) {
    const currentValue = parseInt(event.target.value, 10);
    if (currentValue > 10) {
      setError('Error');
    } else setError(null);
  }
  return (
      {items.map(item => (
        <MyInput
          value={item.value}
          key={item.input}
          error={error}
          handleChange={e => handleChange(e)}
        />

      ))}
  );
};

export default List;

Дочерний компонент:

const MyInput = (props) => {

  return (
    <>
            <input
              defaultValue={props.value}
              type="text"
              placeholder={props.value}
              onChange={e => props.handleChange(e)}
            />
      {props.error ? {props.error} : null}
    </>
  );
};

export default MyInput;

Возможно ли использовать состояние в родительский компонент? Я надеюсь, что вы можете помочь мне:)