Tengo un componente funcional que a veces devuelve un formulario para la selección de archivos y, a veces, devuelve algo más.

Si selecciono mi archivo, el nombre del archivo aparecerá junto al botón "seleccionar archivo", sin embargo, si renderizo otra cosa y luego vuelvo a renderizar la entrada del archivo, el nombre del archivo se pierde y el texto vuelve a "Seleccionar archivo..."

Mantengo el archivo en el estado que se muestra a continuación, pero no puedo volver a poner el nombre del archivo en la entrada, para que el usuario pueda ver que se seleccionó un archivo.

Intenté un enfoque usando Ref como puede ver a continuación, pero no funciona.

¿Que puedo hacer?

 import { useState, useRef } from 'react' import { Form } from 'react-bootstrap' const MyComponent = () => { const [file, setFile] = useState(undefined) const fileRef = useRef(null) fileRef.current = file const onChange = event => { setFile(event.target.files[0]) } if(something) { return (<div></div>) } else { return (<div> <Form.Group controlId="myFileInput" className="mb-3"> <Form.Label>Select file</Form.Label> <Form.Control type="file" onChange={onChange} ref={fileRef}/> </Form.Group> </div> } }