Passing in CircleGeometry radius through React state doesn't work but passing it in directly does?

If I console.log the state directly in the submit handler, it shows the correct value in integer form. If I try to pass in the value into the CircleGeometry constructor directly, for example, CircleGeometry(30, 25), it will render into the scene perfectly fine. But if I try to pass it in through state, nothing happens. Any help would be much appreciated!

I have the controlled form here:

        onFinish={(e) => {
        labelCol={{ span: 2 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600, marginTop: '30px' }}>
            placeholder="circle radius"
          <Button type="primary" htmlType="submit" value="Submit">
            Add circle

And it will call handleChange to update the state with the input value:

const [formCircle, setFormCircle] = useState('');
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value =;

Upon submission, it should add a circle with the input radius:

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
    const geometry = new THREE.CircleGeometry(Number(formCircle), 25);
    const circle = new THREE.Line(geometry, material);
    circle.position.set(50, 50, 50);

Edit: So I found a potential problem. When I console.log the scene with the raw value passed into the CircleGeometry constructor, all the children show up in the object (AmbientLight, Group, Line) but when I console.log the scene with the state passed into the constructor, it only has the Line as its child.