如何为按钮分配值？

Question

我只是为了学习目的而尝试制作一个howmuchtomakeanapp.com的副本，但我一直坚持如何在单击按钮时为按钮分配值。
我的意思是：我单击按钮（具有一个值），它将把这个值添加到总价中，并将我重定向到下一页。
我尝试使用道具，但是对我来说不起作用，我也尝试添加一个不可见的输入并将其视为一种形式，也没有成功。
您能帮助我，告诉我我做错了什么吗？谢谢
this is the project build in codesandbox

function Type(props) {
  const [items, setItems] = useContext(PricingContext);
  const AddItem = e => {
    console.log(e.target.value);
    setItems(prevItems => [...prevItems, e.target.value]);
  };
  return (
    <MainWrapper>
      <PreviousPage to="/">Previous Page</PreviousPage>
      <MainText>What platform you want your app to be built on?</MainText>
      <ButtonsWrapper>
        <SelectionsContainer onSubmit={AddItem} method="POST">
          <RouteLink to="/questions/social">
            <SubButton type="submit">
              <Icon icon={faApple} />
            </SubButton>
          </RouteLink>
          <InvInput name="choice" readonly value={2000} />
          <ButtonLabel>Apple</ButtonLabel>
        </SelectionsContainer>
      </ButtonsWrapper>
    </MainWrapper>
  );
}
export default Type;




   function Main() {
  return (
    <Router>
      <div>
        <PricingProvider>
          <Route path="/questions/" component={Price} />
          <Route exact path="/" component={Frontpage} />
          <Route exact path="/questions/type" component={Type} />
          <Route exact path="/questions/social" component={Social} />
          <Route exact path="/questions/payments" component={Payments} />
          <Route exact path="/questions/logo" component={Logo} />
          <Route exact path="/recap" component={Recap} />
        </PricingProvider>
      </div>
    </Router>
  );
}
export default Main;

import React, { useState, createContext } from "react";
export const PricingContext = createContext();
export const PricingProvider = props => {
  const [items, setItems] = useState([]);
  return (
    <PricingContext.Provider value={[items, setItems]}>
      {props.children}
    </PricingContext.Provider>
  );
};