Tutorial Help! Public Registry App

Public Registry App Step 3

Ive been following the tutorial perfectly with no issues. On step 3 ill have to add the PublicUrlRegistrar tag.

Ill get this error that i have no idea how to resolve:

Error: This must be used within the ConnectProvider component.

The error is pointing to line 8 of PublicUrlRegistrar.jsx

const { doContractCall } = useConnect();

It seems useConnect() must be used in the ConnectProvider component.

Even if I comment out the PublicUrlRegistrar.jsx functions and only leave line 8 ill get the same error.

Ive tried many things and been working on this for a while now with no way to progress.
Any insights into this would be very helpful! Thank you!

Solved: reactjs - React jsx Error Must be used within the ConnectProvider Component - Stack Overflow