Kentavr16

Повторение двух цветов, наклон и транслейт с помощью - transform: skew, translate
https://webref.ru/css/value/skew

Вместо нескольких стейтов пусть будет один - объект. Общий обработчик onChange достаёт из целевого объекта помимо значения ещё и имя инпута, одновременно являющегося именем обновляемого свойства (его придётся передавать в экземпляры CustomTextField, а внутри самого CustomTextField прокидывать внутрь TextField). Вот так (как добавить два других свойства - думаю, сами догадаетесь):

interface IFormData {
  firstName: string;
  lastName: string;
}

const [ formData, setFormData ] = React.useState<IFormData>({
  firstName: '',
  lastName: '',
});

const onChange = (e: React.ChangeEvent<HTMLInputElement>) => setFormData({
  ...formData,
  [e.target.name]: e.target.value,
});

<CustomTextField name="firstName" value={formData.firstName} onChange={onChange} />
<CustomTextField name="lastName" value={formData.lastName} onChange={onChange} />

<!-- или -->

{Object.entries(formData).map(([ k, v ]) => (
  <CustomTextField key={k} name={k} value={v} onChange={onChange} />
))}

Вообще удобно смотреть по realworld app - там стандартизован интерфейс, есть разные имплементации фронтов и бэка
https://codebase.show/projects/realworld
Бэк по nodejs+mongo там сейчас не поддерживается.
Но ознакомиться можно тут: https://github.com/gothinkster/node-express-realwo...
Впрочем есть свежий пример на базе SQL БД: https://github.com/Varun-Hegde/Conduit_NodeJS
С реактом там 3 варианта на выбор

Все дело в замыкании. Переданная в setInterval функция замыкает в себе переменную seconds в значении ноль. Интервал работает, но при каждом следующем вызове функции переменная seconds имеет прежнее значение.

В setSeconds нужно передать функцию, которая будет вызвана с актуальным значением seconds.

Вот так:

function App() {
    
    const [ seconds, setSeconds ] = React.useState(0)

    // старый вариант, не работает
    const startTimer = () => {
        setInterval(() => {
            setSeconds(seconds + 1)
        }, 1000)
    }

    // новый вариант, работает
    const startTimer = () => {
        setInterval(() => {
            setSeconds((seconds) => {
                return seconds + 1
            })
        }, 1000)
    }

    return (
        <div>
            <button onClick={startTimer}>start</button>
            <h1>{seconds}</h1>
        </div>
    )
}