HexInput.tsx

import React from 'react';

export const HexInput = ({ hex, setHex }) => {
  const onChange = ({ target: { value } }) => {
    setHex(value);
  };

  return (
    <label>
      Hex:
      <input value={hex} onChange={onChange} />
    </label>
  );
};

RgbaInput.tsx

import React from 'react';

export const RgbaInput = ({ rgba, setRgba }) => {
  const onChange = idx => ({ target: { value } }) => {
    const newRgba = [...rgba];
    newRgba[idx] = value;

    setRgba(newRgba);
  };

  return (
    <label>
      RGB(A):
      <input value={rgba[0]} onChange={onChange(0)} />
      <input value={rgba[1]} onChange={onChange(1)} />
      <input value={rgba[2]} onChange={onChange(2)} />
      <input value={rgba[3]} onChange={onChange(3)} />
    </label>
  );
}

X-ColorInputApp.tsx.diff

@@ -9,8 +9,8 @@ export const ColorToolApp = () => {

   return (
     <main>
-      <HexInput />
-      <RgbaInput />
+      <HexInput hex={hex} setHex={setHex} />
+      <RgbaInput rgba={rgba} setRgba={setRgba} />
     </main>
   );
 };