i have the following elements:

In react I just declared the following:

  const [type, setType] = useState("");
  const [propertyName, setPropertyName] = useState("");

The html is the following:

           <div>
            <label htmlFor='properties' className='properties-label'>
              Properties
            </label>
            <div className='property-box'>
              <input
                type='text'
                id='type'
                placeholder='Type'
                className='type-element'
                required
                onChange={(e) => setType(e.target.value)}
              ></input>
              <input
                type='text'
                id='name'
                className='type-element'
                placeholder='Name'
                required
                onChange={(e) => setPropertyName(e.target.value)}
              ></input>
              <button className='buttonAccount' type='submit'>
                Add Property
              </button>
            </div>
          </div>

What I want to basically is somehow to add a property, containing the two values. I was thinking using an array to store some objects like the following example: { type: card name: Dragon }

But I don't really know how to tackle this problem. Should I first create an empty array and then store those two fields in an object? How is this done? How can I make sure that both of the fields are completed(they shouldn't go to the database if one of them is empty). After these two fields are inputted I want a new element appear right underneath those fields, like a paragraph with the data that I introduced, an example that I saw is familiar with this is on OpenSea, when creating an NFT(https://opensea.io/asset/create) Can somebody explain me a way to solve this problem?