I know this question has been asked before but the solutions posted there didn't correct my issue.

So I'm working with React and have a component. Everything else works fine, but now I'm trying to use a few useStates to get dynamic information as I intend to connect to an API/server further down the line.

I'm also using styled-components, which is why you'll see odd tag names. These work fine because I worked on them first and have them visible when I run npm start

The issue is that when I try to type something other than 0 in to this input, it refuses to update and gives me e.target is undefined

Here's where my error is occuring (on the e.target.value):

<InnerWrap flexColumn>
    <AttributeFrame>

        <EngravingInput 
            type= "text" 
            placeholder="20" 
            inputWidth="50px" 
            name="charSTR" 
            value={charAttributes.charSTR} 
            onChange={(e) => handle_attr_Change(e.target.value)}/>

        <Spacer />
        <>{((charAttributes.charSTR)-10)/2}</>
        <>STR</>
    </AttributeFrame>
</InnerWrap>

Here's the useState (Recently learned I could put multiple fields in a single useState):

    const [charAttributes, set_CharAttributes] = useState(
        {
          charSTR: 0,
          charSTRmod: 0  
        });
    

Then, here's the function that's supposed to fire on the onChange part of my element input:

//This is in my component definition, before the return block
    const handle_attr_Change = (e) => {
        const value = e.target.value;
        set_CharAttributes(
            {
            ...charAttributes,
            [e.target.name]: value
            }
        );

The whole idea is that the charSTRmod value is supposed to update whenever the user types in a number. It's meant to calculate the attribute bonus for a strength attribute from DnD 5e.

Screengrab of the part:

Please could someone tell me what I did wrong?