Please explain what the following code does.

createP.js :

import $\{$ useState $\}$ from "react"

import $\{$ BASE$\_$URL $\}$ from $"./$url$"$;

import $\{$ Link $\}$ from "react$-$router$-$dom";

export default function MakeForms$()\{$

const dataForms $=\{$

title: $\text{'}\text{'},$

completed: false,

$\}$;

const firstMsg $=\{$

msg: $\text{'}\text{'},$

createId: null,

$\}$;

const $[$formData$,$ setFormData$]=$ useState$($dataForms$)$;

const $[$message$,$ setMessage$]=$ useState$($firstMsg$)$;

const handleChange $=($event$)=>\{$

const type $=$ event.target.type;

switch $($type$)\{$

case 'checkbox':

setFormData$(\{$

$...$formData,

completed: event.target.checked,

$\})$;

break;

case 'text':

setFormData$(\{$

$...$formData,

title: event.target.value,

$\})$;

break;

default:

return;

$\}$

$\}$;

const handleSubmit $=$ async $($event$)=>\{$

event.preventDefault$()$;

const result $=$ await fetch$(`$$$\{$BASE$\_$URL$\}/$ps$`,\{$

method: "POST",

headers: $\{$

"Content$-$Type": "application$/$json$",$

$\},$

body: JSON.stringify$($formData$),$

$\})$;

if $($result$.$status $!==201)\{$

setMessage$(\{$ msg: "Failed.", createId: null $\})$;

return;

$\}$

const createId $=$ await result.json$()$;

setMessage$(\{$ msg: "Successful", createId $\})$;

setFormData$($dataForms$)$;

$\}$

return $($

$<>$

$\{$message$.$msg $?$

$<>$

$\{$message$.$msg$\}$

: null

$\}$

A navbar should be here, but it's not?Some footer here,

loader: loadP,

children: $[$

$\{$

path: $"$ts$/$:tId",

element: $,$

loader: loadSingleT,

$\},$

$],$

$\}$

$]$

$\}$

$])$;

const root $=$ ReactDOM.createRoot$($document$.$getElementById$(\text{'}$root$\text{'}))$;

root.render$($

$)$;

reportWebVitals$()$;

url.js:

const BASE$\_$URL $="$ localhost:$3000"$;

export $\{$ BASE$\_$URL $\}$;