I am trying to modify a react parameter in a component but am running into a hydration error and am not sure what the best way to solve it is.

Error: Text content does not match server-rendered HTML.
Warning: Text content did not match. Server: "user_id: string" Client: "user_id: string: string"
See more info here: https://nextjs.org/docs/messages/react-hydration-error

import React from 'react';
import APIEndpointForm, { APIEndpointFormProps } from '@src/components/api/api-endpoint/endpoint-form';
import { FormInputProps } from '@src/components/form';

export default function APIEndpointFormEtc({ btn_text, parameters, get_response }: APIEndpointFormProps) {
        parameters.map((param : FormInputProps) => {
            const name = `${param.name}: ${param.type}`
            param.name = name;
            return param;
        })
    
    return (
        <APIEndpointForm
            btn_text={btn_text}
            parameters={parameters}
            get_response={get_response}            
        />
    )
}


export function GetUser() {
    return (
        <APIEndpointFormEtc
           ...
        />
    )
}

If I remove the parameters.map line it all works fine. But it ends up being a lot of code duplication if I move that out of the component.

Just to be clear, what I am trying to do is modify the parameters before the component is created in a reusable manner. Ideally, Id like to solve this without disabling server side rendering.
Any help is appreciated.