I am totally new to ruby, and have been going at this bug for hours to no avail. Where is the issue, or how can I go about understanding it better to find it on my own?

Error:
ActionController::RoutingError (uninitialized constant Api

  Object.const_get(camel_cased_word)
        ^^^^^^^^^^

        raise MissingController.new(error.message, error.name)
        ^^^^^):

routes.rb:

Rails.application.routes.draw do
  get 'welcome/index'

  namespace :api, defaults: { format: 'json' } do
    namespace :v1 do
      resources :guests, only: %i[create]
    end
  end

  root 'welcome#index'
end

guests_controller.rb:

class Api::V1::GuestsController < Api::V1::BaseController
  def create
    @guest = Guest.new(guest_params)
    if @guest.save
      render json: { message: 'Success! Welcome, ' + @guest.full_name }, status: :created
    else
      render json: { errors: @guest.errors }, status: :bad_request
    end
  end

  private

  def guest_params
    params.require(:guest).permit(:full_name, :phone_number)
  end
end

Guest.js:

import React, { useState } from 'react';
import axios from 'axios';

const Guest = () => {
  const [fullName, setFullName] = useState('');
  const [phoneNumber, setPhoneNumber] = useState('');
  const [fullNameError, setFullNameError] = useState('');
  const [phoneNumberError, setPhoneNumberError] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();

    const validPhoneNumberRegex = /^d{10,11}$/;

    if (fullName.trim().split(' ').length !== 2) {
      setFullNameError('*must be your first and last name');
    } else {
      setFullNameError('');
    }

    if (!validPhoneNumberRegex.test(phoneNumber)) {
      setPhoneNumberError('*must be numbers only (ex. 1231231234)');
    } else {
      setPhoneNumberError('');
    }

    if (fullName.trim().split(' ').length == 2 && validPhoneNumberRegex.test(phoneNumber)) {
      alert(`Success! Welcome, ${fullName}.`);
      axios.post('http://localhost:3000/api/v1/guests', {
        full_name: fullName,
        phone_number: phoneNumber
      })
        .then((response) => {
          alert(response.data.message);
        })
        .catch((error) => {
          console.error(error);
        });
    }
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    if (name === 'fullName') {
      setFullName(value);
    } else if (name === 'phoneNumber') {
      setPhoneNumber(value);
    }
  };

  return (
    <div className="guest">
      <h1 className="guest__title">Welcome</h1>
      <p className="guest__subtitle">
        Please provide your full name and phone number.
      </p>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="fullName">Full Name:</label>
          <input
            type="text"
            id="fullName"
            name="fullName"
            className={`${fullNameError ? 'error' : ''}`}
            value={fullName}
            onChange={handleChange}
            placeholder="Please enter your full name"
          />
          {fullNameError && (
            <div className="error-message">{fullNameError}</div>
          )}
        </div>
        <div>
          <label htmlFor="phoneNumber">Phone Number:</label>
          <input
            type="text"
            id="phoneNumber"
            name="phoneNumber"
            className={`${phoneNumberError ? 'error' : ''}`}
            value={phoneNumber}
            onChange={handleChange}
            placeholder="Your Phone Number"
          />
          {phoneNumberError && (
            <div className="error-message">{phoneNumberError}</div>
          )}
        </div>
        <button type="submit">View Menu</button>
      </form>
    </div>
  );
};

export default Guest;

Trying to create my first post request, not working.