Tengo problemas para actualizar el estado mediante la combinación de accesorios de entrada seleccionados en una cadena para pasar una ruta adecuada con valores a la API.

Tengo algo como esto en la lógica:

 const [data, setData] = useState({ certificate: '', year: '' }) const merge = () =>{if(data.certificate!==''){(setData(Object.values(data).join("")))}} merge() useEffect(() => { (async () => { try { const params = { data, } const result = await service.getBackendData({ params}) if (result.error) throw result.error setList(result) } catch ({ message }) { console.error('error', message) } })() }, [data])

El propósito del código es obtener dos valores de cadenas del componente de formulario (estoy usando Formik) y esto realmente funciona bien. Pero luego, dos valores dentro del estado (certificado y accesorios del año) deben fusionarse en una cadena para enviar una ruta adecuada a la API y obtener una respuesta.

useEffect parte también funciona, si uso valores por separado, pero en este asunto en particular debo encontrar una manera de conectar estos dos anteriores en una sola cadena.

Traté de crear una función de combinación con la condición de que el usuario seleccionara y, por lo tanto, pasara un valor de certificado, pero eso solo retrasó un error de representación. Después de seleccionar el valor, la función, por supuesto, funciona y une dos valores, pero se crea un bucle infinito.

Leí que cambiar el estado en una fase de renderizado no es una buena idea (por decirlo suavemente), así que no puedo hacerlo de esa manera. Hasta ahora me quedo sin ideas. ¿Qué me estoy perdiendo?

Debajo de la parte del código del Formulario, referente a estos valores. Al hacer clic, el usuario pasa de las opciones seleccionadas un valor de certificado, y luego debo fusionarlo con el valor del año en una cadena.

 const initialValue = { CERTIFICATE: '', YEAR: '&0', } <S.CustomSelect name={certificateInput.certificate.name} placeholder={certificateInput.certificate.placeholder} onClick={setData((prevState) => ({ ...prevState, certificate: values.CERTIFICATE, }))} > {certificatesValues.map((item) => ( <Option key={item.name} value={item.symbol}> {item.name} </Option> ))} </S.CustomSelect>