Вот сюда добавь поле className, этот класс применится к самому инпуту. Только, если я не ошибаюсь, там должно быть InputProps, а не inputProps

Подскажите пожалуйста!

Я использую стрелочные функции внутри класса как компоненты, например: <this.componentName />. Мне это кажется удобным, тк я разбиваю более крупные элементы на такие микрокомпоненты с общими данными (props/state)
Все хорошо работает, до тех пор, пока я не вызываю таким образом компонент из другого аналогичного компонента (npm start ничего не показывает а после build при исопльзовании возникают ошибки)

Как это исправить? Есть какая-то возможность сделать это дело так, чтобы работало без проблем?

кто вообще так пишет

такого я конечно еще не видел

Ну, это удобно и в коде проще разбираться)

в чем проблема вынести в отдельные компоненты?

Чтобы props, state и store шэрить проще было

Все в одном получается)

componentCardBody вынести в тупые компоненты - Card, кнопки экшенов тоже в отдельный, если нужен рендер по условию - conditional rendering

и никакой переиспользуемости и масштабирования

state = {
       inBookmark: this.props.inBookmark,
   };

{console.log(this.state.inBookmark, this.props.inBookmark)}

Почему так может быть?

setStat'ов нигде нет

В this.props.inBookmark иногда приходит false, иногда true. Так вижу

Да, но this.state.inBookmark всегда остается фольс

судя по console.log, это не так

{console.log(this.state.inBookmark, this.props.inBookmark)}
Первое(this.state.inBookmark) всегда false

state = {
       inBookmark: console.log(this.props.inBookmark),
   };
еще такое попробовал ради интереса и консолило онли false..

А, блин. дошло, о чём вы)
Когда вы объявляете стейт (это происходит в конструкторе класса), в него кладётся первое значение

Если вы хотите его изменить, для этого нужен setState

Я пытаюсь инициализировать стэйт с помощью пропсов и у меня это не выходит