How to set default state for an object when using useState

If I set a default value for an object using useState in a React function component, then my control linking to a field in that object does not get updated state values for a field in the object.

See this example:

import React, {useState} from 'react'
import {Form} from 'react-bootstrap'

function BrokenForm(props) {

    const defaultO = {
        field1: "this gets stuck in state - or so it looks ..."
    }

    const [o, setO] = useState(defaultO)          // Setting a default here causes trouble
    const [x, setX] = useState('simple value')    // This works as expected

    const onChangeField1 = (event) => {
        let newO = o
        newO.field1 = event.target.value
        setO(newO)
    }

    const onChangeX = (event) => setX(event.target.value)

    return (
        <Form>
            <Form.Label>Object Field1</Form.Label>
            <Form.Control value={o.field1} onChange={onChangeField1} />

            <Form.Label>Simple Value</Form.Label>
            <Form.Control value={x} onChange={onChangeX} />
        </Form>
    )
}

The first form control never updates with the value of o.field1 even though the onChangeField1 function looks like it has updated it.

However, if I initialize the value of o with a null object, everything works fine:

const [o, setO] = useState[{}]

What am I doing wrong?

let newO=o;

let newO={...o}