Почему передается неверный url?

export default function Form(props) {
    const classes = useStyles(props);
    const inputRef = useRef(null);
    const formRef = useRef(null);
    const onSubmit = (event) => {
        event.preventDefault();
        const url = `${inputRef.current.value}${formRef.current.action}/`
        console.log(inputRef.current.value)
        console.log(formRef.current.action)
        fetch(url)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                console.log('response: ', response);
                return response.json();
            })
            .then(data => {
                console.log(data)
            })
            .catch(error => {
                console.error('Error: ',error)
            })

    }
    return (
        <form
            className={`${classes["swapi__form"]}`}
            action="https://swapi.dev/api"
            method="get"
            onSubmit={onSubmit}
            ref={formRef}
        >

            <span className={`${classes["swapi__url-span"]}`}>https://swapi.dev/api</span>

            <label className={`${classes["swapi__label"]}`}>
                <input
                    className={`${classes["swapi__input"]}`}
                    type="text"
                    placeholder="/people/1/"
                    ref={inputRef}
                />
            </label>

            <button className={`${classes["swapi__button"]}`}>Get info</button>
        </form>
    )
}