Jun1801

У вас в опциях css-loader указано url: false, поэтому он не обрабатывает конструкции url('../*/font.otf') в стилях и оставляет их как есть. Уберите эту опцию, тогда css-loader будет пробовать зарезолвить указанные ресурсы, как если бы вы их импортили из JS. Скорее всего Вебпак заругается, потому что не будет знать, как обрабатывать эти типы файлов; чтобы не ругался, укажите в конфиге file-loader или url-loader для шрифтов и других подключаемых локально файлов.

Вы мутируете state:

this.state.data[this.state.id][e.target.name] = !checked;

До этого присваиваете ему значение props:

this.setState({
  data: this.props.data,
  id: this.props.id
});

Естественно props изменяется после мутации.

Банальный пример:

const a = { key: 'value' };
const b = a;
b.key = 'new value';
console.log(a.key); // new value

Почитайте о том, что такое передача по ссылке. Почитайте про иммутабельность.
И никогда больше не пишите ничего подобного:

this.state.data[this.state.id][e.target.name] = !checked;

Изменение state только через this.setState.