我是一个初学者在React，并试图学习useState。我有困难，如何获得输入的值，并保存该值，并打印它的按钮点击

const HomePage = () => {
  const [state, setState] = useState({
    Name: "",
    surName: "",
  });

  const handleChange = (e) => {
    setState({
      ...state,
      [e.target.name]: e.target.value,
    });
  };
  const RenderNameOC = () => {
    return (
        <p>
          Halo {Name} {surName}
        </p>
    
    );
  };

  return (
    <DivContainer>
      <ContainerTitle>
        <p>Exercise 2 - Form</p>
      </ContainerTitle>
      <InputContainer>
        <InputArea>
          <label>Name: </label>
          <input type="text" value={state.Name} onChange={handleChange} />
        </InputArea>
        <InputArea>
          <label>Surname: </label>
          <input type="text" value={state.surName} onChange={handleChange} />
        </InputArea>
        <SubmitButton onClick={RenderNameOC}>Submit</SubmitButton>
      </InputContainer>
    </DivContainer>
  );
};

export default HomePage;

这是我现在的代码，它给我的错误是“名称”和“姓氏"没有定义。
我的预期结果是，将有2个输入文本框与姓名。当按钮被点击，它会添加一个新的下面。