Этот компонент имеется в двух местах, в первом он используется

для создания объекта, а во втором он принимает данные, чтобы показать юзеру то, что он создал. При этом во втором компоненте он может изменить эти данные и отправить на бэк, чтобы изменить значения. Вопрос в том, что не знаю, как правильно это реализовать, так как получается уже каша
Ниже код:
export default function InputComittions({ coin }) {
const [value, setValue] = useState(coin && coin.commision ? coin.commision.internal : 2.5)
const temp = (value / 5) * 100

const { setInternal, setExternal } = useContext(CoinContext)

return (
<div className="">
<div className="grid grid-cols-3 grid-rows-2 md:grid-rows-1 mt-4 md:mt-0">
<div className="row-start-2 md:row-start-1 md:col-start-1">
<h5 className="text-commission w-28">External:
<span className="text-black ml-1">{5 - value}%</span>
</h5>
</div>
<div className="col-span-full md:col-span-1 md:col-start-2 md:row-start-1">
<input className="range-uap w-full md:self-center" value={value} type="range" name="" id="" min="0" max="5" step="0.5" style={{ background: 'linear-gradient(to right, black 0%, black ' + temp + '%, #E9E9E9 ' + temp + '%, #E9E9E9 100%)' }} onChange={(e) => {
setValue(e.target.value)
setInternal(Number(e.target.value))
setExternal(5 - e.target.value)
}} />
</div>
<div className="row-start-2 md:row-start-1 col-start-3 md:col-start-3 flex justify-end">
<h5 className="text-commission w-28">Internal:
<span className="text-black ml-1">{value}%</span>
</h5>
</div>
</div>
</div>
)
}

Если хочешь что бы это месиво хоть кто-то мог прочитать закинь в песочницу и ссылку сюда вместо кода