0xD34F

Если выбор сводится к да/нет, то почему должны быть две радиокнопки, а не один чекбокс? Но окей, вам виднее.

Складываем в массивы описания радиокнопок:

const presence = [
  { value:    'coming', text:    'Приду' },
  { value: 'notComing', text: 'Не приду' },
];

const transport = [
  { value: 'yes', text:  'Да' },
  { value:  'no', text: 'Нет' },
];

Создаём стейт с данными формы и метод его обновления:

const [ formData, setFormData ] = useState({});
const onChange = ({ target: t }) =>
  setFormData(fd => ({
    ...fd,
    [t.name]: t.value,
  }));

Создаём компоненты радиокнопки и радиогруппы:

const Radio = ({ children, className, ...props }) =>
  <label className={className ?? ''}>
    <input type="radio" {...props} />
    {children}
  </label>;

const RadioGroup = ({ title, name, items, value, onChange }) =>
  <div className="radiogroup">
    <div className="radiogroup-title">{title}</div>
    {items.map(n => (
      <Radio
        key={n.value}
        className={`radiogroup-item ${value === n.value ? 'active' : ''}`}
        name={name}
        value={n.value}
        checked={value === n.value}
        onChange={onChange}
      >
        {n.text}
      </Radio>
    ))}
  </div>;

Создаём радиогруппы, используя массивы с описаниями радиокнопок:

<RadioGroup
  title="Подтвердите присутствие"
  name="presence"
  items={presence}
  value={formData.presence}
  onChange={onChange}
/>
<RadioGroup
  title="Нужен ли трансфер до места проведения?"
  name="transport"
  items={transport}
  value={formData.transport}
  onChange={onChange}
/>

Всё.

при изменении language у меня не меняются переводы

Меняются. С запаздыванием на один шаг. Потому что texts обновляется в эффекте, т.е., после того, как новая версия t будет создана. Так что t получает ссылку на старую версию texts.

Никакого texts не надо, доставайте в t нужный объект из translations напрямую:

const t = useCallback(
  key => key
    .split('.')
    .reduce((p, c) => p?.[c], translations[language]),
  [ language ]
);

использую библиотеку rc-slider, к сожалению она не предлагает возможности...

А если изучить документацию повнимательнее? Есть пример с выводом значения в тултипе при перетаскивании, сделать тултип постоянно видимым не проблема.

Вместо общего массива выбранных значений сделать отдельные для каждого из свойств.

Чтобы не дублировались чекбоксы, создавать их на основе уникализированных массивов значений свойства вместо массива данных.

Чтобы поменьше копипастить, оформить чекбоксы в отдельный компонент - принимает массив доступных значений, массив выбранных значений, функцию установки выбранных значений.

Собственно фильтрация - для каждого из свойств проверять, что соответствующий массив выбранных значений пуст или содержит значение свойства элемента массива данных.

https://jsfiddle.net/bqyxa0kL/

Состояние компонента должно содержать три значения - индекс печатаемой строки, количество отображаемых символов, направление печати (печатаем или стираем, т.е., в какую сторону надо изменять количество отображаемых символов, увеличивать или уменьшать). Дальше понятно что - setInterval или рекурсивный setTimeout, изменяем количество отображаемых символов, если дошли до конца строки - меняем направление, дошли до начала - меняем направление и индекс строки. Вот как-то так:

const defaults = {
  index: 0,
  length: 0,
  step: 1,
};

function Typewriter({ strings, delay }) {
  const [ state, setState ] = useState(null);

  useEffect(() => {
    setState(() => ({...defaults}));
  }, [ strings ]);

  useEffect(() => {
    const timeoutId = setTimeout(setState, delay, ({...state}) => {
      state.length += state.step;
      if (state.length === strings[state.index].length) {
        state.step = -1;
      } else if (state.length === 0) {
        state.step = 1;
        state.index = (state.index + 1) % strings.length;
      }
      return state;
    });

    return () => clearTimeout(timeoutId);
  });

  return <div>{strings?.[state?.index]?.slice(0, state?.length)}</div>;
}

Надо запоминать индекс кликнутого li.

const defaultEdit = {
  index: -1,
  value: '',
};

function App() {
  const [ notes, setNotes ] = useState([...'12345']);
  const [ edit, setEdit ] = useState(defaultEdit);

  const onClick = ({ currentTarget: { dataset: { index } } }) =>
    setEdit({ index: +index, value: notes[index] });

  const onChange = ({ target: { value } }) =>
    setEdit(edit => ({ ...edit, value }));

  const onBlur = () => {
    setNotes(notes => notes.map((n, i) => i === edit.index ? edit.value : n));
    setEdit(defaultEdit);
  };

  return (
    <div>
      <ul>{notes.map((n, i) => (
        <li data-index={i} onClick={onClick}>
          {n}
        </li>))}
      </ul>
      <input value={edit.value} onChange={onChange} onBlur={onBlur} />
    </div>
  );
}

https://jsfiddle.net/fbex5azy/1/

Не выдумывайте, всё рендерится.

Почему видимых изменений нет? Потому что обновляете одно состояние, а рендер выполняете на основе другого, items в App и items в ElementsList - это разные массивы. Не надо никакого useState в ElementList, выполняйте рендер на основе prop'а; метод onDelete перенесите в App и тоже передавайте в ElementList через props.

Добавьте в дочерний компонент эффект, который будет зависеть от props'ов и обновлять состояние:

useEffect(() => setValue(props.value), [ props.value ]);

Это если прямо отвечать на спрошенное. Но действительно ли дочерний компонент должен хранить значение input'а у себя? Возможно, вы не конца понимаете, чего хотите, и вам надо узнать про подъём состояния.

Документация подсказывает, что есть такая штука, как

onClickCapture: A version of onClick that fires in the capture phase.

fitBounds:

// это массив ваших "точек"
const locations = [
  { lat: ..., lng: ... },
  { lat: ..., lng: ... },
  ...
];

const onLoad = map => {
  const bounds = new window.google.maps.LatLngBounds();
  locations.forEach(n => bounds.extend(n));
  map.fitBounds(bounds);
};

<GoogleMap
  onLoad={onLoad}
  ...
>
  {locations.map(n => <Marker position={n} />)}
</GoogleMap>

const useChunked = (data, chunkSize) =>
  useMemo(
    () => Array.prototype.reduce.call(
      data,
      (acc, n, i) => ((acc[i / chunkSize | 0] ??= []).push(n), acc),
      []
    ),
    [ data, chunkSize ]
  );

const ChunkedListItem = ({ item }) =>
  <pre>{JSON.stringify(item, null, 2)}</pre>;

const ChunkedList = ({ items, inRow, Item = ChunkedListItem }) => {
  const rows = useChunked(items, inRow);

  return (
    <div className="chunked-list">
      {rows.map(row => (
        <ul>
          {row.map(n => <li><Item item={n} /></li>)}
        </ul>
      ))}
    </div>
  );
}

https://jsfiddle.net/7pq92ud8/1/

const [ items, setItems ] = useState([]);
const [ src, setSrc ] = useState('');

const onChange = e => {
  setSrc(e.target.value);
};

const onClick = () => {
  setSrc('');
  setItems([
    ...items,
    {
      id: 1 + Math.max(0, ...items.map(n => n.id)),
      src,
    },
  ]);
};

const onSortEnd = (iOld, iNew) => {
  setItems(([...items]) => (
    items.splice(iNew, 0, items.splice(iOld, 1)[0]),
    items
  ));
};

<div>
  <input value={src} onChange={onChange} />
  <button onClick={onClick}>add</button>
</div>
<SortableList onSortEnd={onSortEnd}>
  {items.map(n => (
    <SortableItem key={n.id}>
      <img src={n.src} />
    </SortableItem>
  ))}
</SortableList>

const languages = [
  { name:  'Ru', Component: AppRu  },
  { name: 'Eng', Component: AppEng },
  ...
];

const [ language, setLanguage ] = useState(0);
const { name, Component } = languages[language];
const onClick = () => setLanguage((language + 1) % languages.length);

<button onClick={onClick}>{name}</button>
<Component />

Как может работать то, что вы не используете?

<div className={classes.bar1}></div>

Класс bar1 есть, это хорошо. А почему нет bar? Плохо.

UPD. Ну и в целом многословно как-то. Зачем копипастить по двенадцать раз одно и то же? В createUseStyles заменяем все barN на

...Object.fromEntries(Array.from({ length: 12 }, (_, i) => [
  `bar${i + 1}`,
  {
    transform: `rotate(${i * 30}deg) translate(0, -130%)`,
    animationDelay: `${i * 0.1 - 1.2}s`,
  },
])),

А в компоненте Loader пусть будет так:

<div className={`${classes.loader} js--loader`}>
  {Array.from(
    { length: 12 },
    (_, i) => <div className={`${classes.bar} ${classes[`bar${i + 1}`]}`}></div>
  )}
</div>

Возникает проблема, что нужно нажать 2 раза на подсказку, чтобы она исчезла.

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

Может, вместо эффекта вам стоит вычислять массив подсказок в обработчике onChange:

const onChange = ({ target: { value } }) => {
  setVal(value);
  setPrintVariables(value.length > 1
    ? arrayVariables.filter(n => n.includes(value))
    : []
  );
};

<input value={val} onChange={onChange} />

??