If I had a functional component which required use and manipulation of multiple state items, and I had multiple states going for different things that arent directly related (such as game statistics and UI element states) would it be better performance (or practice) wise to do it like this:

const [state, setState] = React.useState({

    username: 'JoeSchmoe200',

    points: 200,

    isHoveringOverItem: {item1: false, item2: false, item3: false},

    selectedItem: {item1: true, item2: false, item3: false}

})

(where everything held in state is in one object and set with one method), or like this:

const [username, setUsername] = React.useState('JoeSchmoe200')

const [points, setPoints] = React.useState(200)

const [isHoveringOverItem, setIsHoveringOverItem] = React.useState(

    {item1: false, item2: false, item3: false}

)

const [selectedItem, setSelectedItem] = React.useState(

    {item1: true, item2: false, item3: false}

)

where each state is declared individually and set individually. I'm just trying to spark a conversation here to learn more about React.

What do you think about this performance-wise? Readability-wise? Is it a matter of preference or is there an objective best practice?